Cara Membuat Hover Keren pada Konten dengan CSS3

Hover memang sudah tidak asing lagi ketika kita membuat sebuah animasi atau efek sederhana pada website, karena dengan efek hover ini kita bisa kreasikan berbagai macam objek menjadi sebuah efek yang keren. Berikut ini akan saya kasih referensi buat kalian yang ingin membuat efek hover dengan CSS3 yakni saya akan bahas bagaimana Cara Membuat Hover Keren pada Konten dengan CSS3. Buat kalian yang suka membuat efek dengan CSS3 tidak ada salahnya untuk mecoba tutorial ini, yuk simak langkah-langkah nya berikut ini.

Langkah pertama untuk membuat efek hover ini, kita terlebih dahulu akan membuat struktur HTML untuk membuat konten nya, silahkan ketikan sintak HTML berikut.

<body>
	<div class="container">
	  <div class="kiri">
	    <h1>Lorem Ipsum is..</h1>
	    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	  </div>
	  <div class="kanan">
	    <a href="#">Content !</a>
	  </div>
	</div> 
</body>

<body>

<h1>Lorem Ipsum is..</h1>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

<a href="#">Content !</a>

</div>

</body>

Setelah sintak HTML diatas diketikan, selanjut nya adalah kita akan desain tampilan konten diatas dengan CSS3 dan menambahkan efek hover.

.container {
  color: white;
  width: 45em;
  height: 13em;
  background: #4B1431;
  position: relative;
  overflow: hidden;
  margin: 2.5em auto;
}

.kiri {
  padding: 3em;
  height: 100%;
  width: 100%;
}
.kiri h1 {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
}
.kiri p {
  font-size: 1.2em;
  width: 18em;
  margin: 0;
}

.kanan {
  height: 100%;
  width: 100%;
  background: #FFDF00;
  position: absolute;
  top: 0;
  left: 28em;
  transition: 0.95s;
}
.kanan::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 12em 0 0;
  border-color: transparent #FFDF00 transparent transparent;
  left: -5em;
  top: 0;
  position: absolute;
}
.kanan:hover {
  transition: 0.55s;
  transform: translateX(-28em);
}
.kanan:hover a {
  transition: 0.25s;
  transform: translateX(0) scale(1.5);
}
.kanan:hover a::before {
  width: 4.9em;
}
.kanan a {
  font-weight: 700;
  text-decoration: none;
  color: #4B1431;
  text-align: center;
  display: block;
  font-size: 2.1em;
  transform: translateX(-6.75em);
  transition: 0.25s;
  position: relative;
  line-height: 6.5em;
  text-transform: uppercase;
}
.kanan a::after {
  content: '';
  height: 0.10em;
  position: absolute;
  background: #4B1431;
  bottom: 4em;
  left: 8.05em;
  transition: 0.25s;
  width: 0;
}
.kanan a::before {
  content: '';
  height: .1em;
  width: 0;
  position: absolute;
  background: #4B1431;
  bottom: 2.5em;
  transition: 0.25s;
}
.kanan a:hover::before, .kanan a:hover::after {
  width: 6em;
  transition: 0.25s;
}

.container {

color: white;

width: 45em;

height: 13em;

background: #4B1431;

position: relative;

overflow: hidden;

margin: 2.5em auto;

}

.kiri {

padding: 3em;

height: 100%;

width: 100%;

}

.kiri h1 {

margin: 0;

font-weight: 700;

text-transform: uppercase;

}

.kiri p {

font-size: 1.2em;

width: 18em;

margin: 0;

}

.kanan {

height: 100%;

width: 100%;

background: #FFDF00;

position: absolute;

top: 0;

left: 28em;

transition: 0.95s;

}

.kanan::before {

content: '';

width: 0;

height: 0;

border-style: solid;

border-width: 13em 12em 0 0;

border-color: transparent #FFDF00 transparent transparent;

left: -5em;

top: 0;

position: absolute;

}

.kanan:hover {

transition: 0.55s;

transform: translateX(-28em);

}

.kanan:hover a {

transition: 0.25s;

transform: translateX(0) scale(1.5);

}

.kanan:hover a::before {

width: 4.9em;

}

.kanan a {

font-weight: 700;

text-decoration: none;

color: #4B1431;

text-align: center;

display: block;

font-size: 2.1em;

transform: translateX(-6.75em);

transition: 0.25s;

position: relative;

line-height: 6.5em;

text-transform: uppercase;

}

.kanan a::after {

content: '';

height: 0.10em;

position: absolute;

background: #4B1431;

bottom: 4em;

left: 8.05em;

transition: 0.25s;

width: 0;

}

.kanan a::before {

content: '';

height: .1em;

width: 0;

position: absolute;

background: #4B1431;

bottom: 2.5em;

transition: 0.25s;

}

.kanan a:hover::before, .kanan a:hover::after {

width: 6em;

transition: 0.25s;

}

Setelah semua sintak HTML dan CSS3 diatas kalian ketikan, selanjutnya simpan file dengan format .html kemudian coba buka pada browser masing-masing dan lihat hasilnya. maka nanti akan terlihat tampilan konten beserta efek hover nya. Selesai

Baik, selesai sudah tutorial sederhana mengenai bagaimana Cara Membuat Hover Keren pada Konten dengan CSS3. Semoga bermanfaat 🙂 . Untuk lebih jelasnya kalian bisa melihat hasil nya pada demo dibawah ini.

DEMO

Facebook DUMET School

Categories