xZee Blog



Membuat Animasi keren di html dengan atribut :hover CSS

Plsy Store Street Fight
Zen Sama
xZee Blog
CSS Tutorial

CSS

TENTANG

digunakan untuk membuat sebuah animasi ketika sebuah tag html (element) dengan class dengan tambahan atribut :hover di sentuh ataupun di tunjuk oleh mouse (pointer).
jadi intinya ketika sebuah tag html dengan class yang ditambah hover dia akan berubah ketika tersentuh dan akan otomatis kembali seperti semula ketika tidak disentuh (untuk pointer mouse komputer) atau menyentuh area lain (untuk tipe layar sentuh).
hover dapat merubah semua gaya dari sebuah class contoh latar belakang, warna teks, bingkai (border), ukuran teks (font-size), luas (margin dan padding), membuat sudut melengkung (border-radius), merubah posisi (left, right, center, justify), merubah tata letak posisi (static, relative, fixed, absolute) dan kawan-kawannya.

:Hover Sederhana

<style> .contohxzee { background: red; color: white; } .contohxzee:hover { background: white; color: red; } </style> <div class="contohxzee">Sentuh Aku ✅</div>
HASIL
Sentuh Aku ✅

:Hover dengan Transition

<style> .contoh1 { background-color: red; color: gold; text-align: center; transition: 1s; } .contoh1:hover { background-color: gold; color: red; } .contoh2 { background-color: red; color: gold; text-align: center; transition: 1s; border: 2px solid gold; } .contoh2:hover { background-color: gold; color: red; border: 2px solid red; } .contoh3 { background-color: red; color: gold; text-align: center; transition: 1s; border: 2px solid gold; padding: 5px 0; } .contoh3:hover { background-color: gold; color: red; border: 2px dotted red; padding: 10px 0; } </style> <div class="contoh1">xZee Blog contoh 1</div><br> <div class="contoh2">xZee Blog contoh 2</div><br> <div class="contoh3">xZee Blog contoh 3</div><br>
HASIL
xZee Blog contoh 1

xZee Blog contoh 2

xZee Blog contoh 3

:Hover merubah ukuran teks

<style> .contoh4 { font-size: 1em; text-align: center; transition: 2s; background-color: gold; color: red; } .contoh4:hover { font-size: 2em; } </style> <div class="contoh4">xZee Blog Hover</div>
HASIL
xZee Blog Hover

:Hover merubah posisi teks

<style> .contoh5 { font-size: 1em; text-align: left; background-color: gold; color: red; } .contoh5:hover { text-align: right; } </style> <div class="contoh5">Coba Sentuh Aku</div>
HASIL
Coba Sentuh Aku

:Hover efek memperbesar

<style> .contoh6 { text-align: center; background-color: red; color: gold; border: 2px solid gold; transition: 2s; } .contoh6:hover { position: fixed; top: 30%; right: 0; left: 0; font-size: 200%; </style> <div class="contoh6">Aku sebenarnya besar</div>
HASIL
Aku sebenarnya besar

:Hover untuk efek List keren

<style> ul.contoh { background-color: red; list-style: square inside; padding: 5px; margin: 0; border-radius: 1em 0 0 0; border: 3px solid gold; } li.contoh { background-color: gold; padding: 5px 8px; padding-right: 0; margin-bottom: 2px; border: 1px solid black; transition: 1s; } li.contoh:hover { margin-left: 8px; color: red; } </style> <ul class="contoh"> <li class="contoh">Zen Sama</li> <li class="contoh">Lenna Gracie</li> </ul>
HASIL
  • Zen Sama
  • Lenna Gracie

:Hover untuk mengubah textarea

<style> textarea.contoh { background-color: black; color: white; border: 1px solid white; height: 50px; transition: 2s; font-size: 1.2em; } textarea.contoh:hover { height: 100px; font-size: 1em; width: 90%; } </style> <textarea class="contoh"> ini adalah contoh teks dalam textarea pada posting xZee Blog tentang :hover halo halo halo </textarea>
HASIL

:Hover merubah ukuran gambar

<style> img.contoh { max-width: 30%; transition: 2s; } img.contoh:hover { max-width: 100%; } </style> <img src="https://goo.gl/xwnnxT" alt="Mbak Faron" class="contoh"/>
HASIL
Mbak Faron


sebenarnya masih banyak lagi kegunaan :hover seperti membuat menu drop-down dan anu anu.. tapi karena teks sudah cukup panjang jadi posting saya akhiri. bila ada yang belum paham cara untuk anu mengenai :hover di CSS ini silakan tanyakan melalui komentar dibawah.. sekian dan semoga bermanfaat
Share This Post

Post Detail


Posted By: Zen Sama
Posted On: 11 Nov 2017 10:33
Category: Belajar HTML dan CSS


Leave a Comment

Lenna Gracie
Lenna Gracie
11 Nov 2017 10:33
Hello.. No comments yet on "Membuat Animasi keren di html dengan atribut :hover CSS"
Why not to be first user comment?

Please Login first for post a comment

Please switch off your AdBlock and refresh this page :)