Hover adalah salah satu element CSS yang berfungsi untuk memberikan efek tertentu saat maouse atau cursor mengenai element HTML tertenu.
Kali ini kenny ingin membagikan source kode hover yang cukup menarik, yaitu hover left to right.
Hover left to right ini sangat unik, biasanya jika kita melakukan hover terhadap element HTML akan langsung memberikan efeknya, tetapi dengan left to right ini hover akan secara tersusun memberikan efek dari kiri ke kanan.
Untuk lebih langsung saja copy source kode HTML dan CSS dibawah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{ display: flex; height: 100vh; justify-content: center; align-items: center; background: #000 ;}
a{ position: relative; display: inline-block; color: white; text-decoration: none; font-size: 5em; align-self: center; }
a:before { content: attr(data-hover); position: absolute; display: inline-block; width: 0; top: 0; overflow: hidden; color: red; transition: 500ms width ease-out; text-shadow: -1px -1px 0 #302d2a, 1px -1px 0 #302d2a, -1px 1px 0 #302d2a, 1px 1px 0 #302d2a; }
a:hover:before{ width: 100%; }
</style>
</head>
<body>
<a href="#" data-hover="Kenscripts">Kenscripts</a>
</body>
</html>
Selesai dan save dengan format .HTML
Catatan: Ganti tulisan Kenscripts dengan tulisan kalian, dan data-hover harus sama dengan tulisan yang akan ditampilkan
Itulah membuat hover unik left to right dengan CSS
Demo