Cara Membuat Efek Split Dengan CSS Flex

Hallo Sahabat Dumet School. Berjumpa lagi dengan saya Edi, dalam artikel cara membuat efek split dengan CSS Flex . Efek split yang ditimbulkan pada saat di hover pada salah satu bagian tampilan, nah disini kita akan membuat 2 efek split saat dihover. 

Baiklah sekarang kita buat saja file HTML yang diperlukan, sahabat langsung ketikan code html seperti dibawah ini:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Split Screen Efek Hover Dengan CSS FLex</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="split">
    <div class="screen">
      <div class="card">
        <div class="imgBx">
          <img src="eins.jpg" alt="">
        </div>
        <h2>Someone Inspiration</h2>
        <a href="">Read More...</a>
        <div class="content">
            <div class="imgBx">
              <img src="eins.jpg" alt="">
            </div>
            <h2><q>Albert Einstein</q></h2>
            <p>lahir di Ulm, Kerajaan Württemberg, Kekaisaran Jerman, 14 Maret 1879 – meninggal di Princeton, New Jersey, Amerika Serikat, 18 April 1955 pada umur 76 tahun) adalah seorang ilmuwan fisika teoretis yang dipandang luas sebagai ilmuwan terbesar dalam abad ke-20. Dia mengemukakan teori relativitas dan juga banyak menyumbang bagi pengembangan mekanika kuantum, mekanika statistika, dan kosmologi. Dia dianugerahi Penghargaan Nobel dalam Fisika pada tahun 1921 untuk penjelasannya tentang efek fotolistrik dan "pengabdiannya bagi Fisika Teoretis". </p>
            <p>Setelah teori relativitas umum dirumuskan, Einstein menjadi terkenal ke seluruh dunia, pencapaian yang tidak biasa bagi seorang ilmuwan. Pada masa tuanya, keterkenalannya melampaui ketenaran semua ilmuwan dalam sejarah, dan dalam budaya populer, kata Einstein dianggap bersinonim dengan kecerdasan atau bahkan genius. Wajahnya merupakan salah satu yang paling dikenal di seluruh dunia.</p>
        </div>
      </div>
    </div>
    <div class="screen">
      <div class="card">
        <div class="imgBx">
          <img src="bill.jpg" alt="">
        </div>
        <h2>Someone Inspiration</h2>
        <a href="">Read More...</a>
        <div class="content">
            <div class="imgBx">
              <img src="bill.jpg" alt="">
            </div>
            <h2><q>Albert Einstein</q></h2>
            <p>(lahir di Seattle, Washington, 28 Oktober 1955; umur 63 tahun) adalah seorang tokoh bisnis, investor, filantropis, penulis asal Amerika Serikat, serta mantan CEO yang saat ini menjabat sebagai ketua Microsoft, perusahaan perangkat lunak yang ia dirikan bersama Paul Allen. Ia menduduki peringkat tetap di antara orang-orang terkaya di dunia dan menempati peringkat pertama sejak 1995 hingga 2009, tidak termasuk 2008 ketika ia turun ke peringkat tiga.. </p>
            <p>Gates termasuk salah seorang pengusaha revolusi komputer pribadi terkenal di dunia. Meski demikian, taktik bisnisnya dikritik karena dianggap anti-kompetitif. Pada tahap-tahap akhir kariernya, Gates melakukan beberapa usaha filantropi dengan menyumbangkan sejumlah besar dana ke berbagai organisasi amal dan program penelitian ilmiah melalui Bill & Melinda Gates Foundation yang didirikan tahun 2000.</p>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Setelah selesai jangan lupa disimpan diberi nama index.html , langkah berikutnya sahabat ketikan code CSS dan simpan menjadi style.css seperti berikut:

body{
  margin:0;
  padding:0;
  font-family: 'Arial', sans-serif;
}

section{
  position: relative;
  height: 100vh;
  display: flex;
}

section .screen{
  position: relative;
  flex-grow: 1;
  transition:1s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

section .screen:hover{
  flex-grow:5;
}

section .screen:nth-child(1){
  background: #0ff;
}

section .screen:nth-child(2){
  background: #ff0;
}

section .screen .card{
  max-width:300px;
  text-align: center;
  transition: 0.5s;
}
section .screen .card .imgBx{
  width: 170px;
  height:170px;
  border-radius:50%;
  overflow: hidden;
  margin:0 auto;
}

section .screen .card .imgBx img{
  max-width: 100%;
}

section .screen .card a{
  padding: 10px 20px;
  background: #2e2e2e;
  color:#fff;
  text-decoration: none;
}

.content{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 100px;
  background: #0ff;
  transition: 0.5s
  opacity:0;
  visibility: hidden;
}

section .screen .card a:hover ~ .content, .content:hover{
  opacity: 1;
  visibility: visible;
}

section .screen:nth-child(2) .content{
  background:#ff0;
}

Jika sudah selesai membuat file html dan css maka akan terlihat pada tampilan seperti dibawah ini

Gambar dibawah ini saat dihover pada salah satu bagian 

Gambar berikut ini saat dihover pada Read More

Bagaimana sahabat Dumet menarik kan efek yang ditimbulkan, baiklah ini sedikit tips tentang cara membuat efek split dengan CSS Flex dari saya, semoga bermanfaat dan sampai berjumpa kembali .

Terima kasih