Beranda TKJ Cara Hover Gambar Pada Html
Cara Hover Gambar Pada Html
Yoo kawan-kawan Otaku-It disini mimin mau share yaitu cara menghover image pada html, nah disini mimin menggunakan internal css pada html yang mimin buat yuk langsung aja dicek dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Hover</title>
<style>
.image:hover{
opacity: 0.3;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<center><img src="otaku.png" alt="alternate digunakan jika gambar tidak bisa diload" class="image" width="400px" height="400px"></center>
</body>
</html>
maka jika dijalankan code diatas akan seperti berikut:
ketika cursor diarahkan ke gambarnya maka opacity dan ukuranya akan berubah seperti yang sudah di buat di stylenya
Sekian tutorial Kali ini jika ada pertanyaan bisa berkomentar dibawah ini
selamat mencoba /('-')/\('-')\ admin@zee
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Hover</title>
<style>
.image:hover{
opacity: 0.3;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<center><img src="otaku.png" alt="alternate digunakan jika gambar tidak bisa diload" class="image" width="400px" height="400px"></center>
</body>
</html>
maka jika dijalankan code diatas akan seperti berikut:
Sekian tutorial Kali ini jika ada pertanyaan bisa berkomentar dibawah ini
selamat mencoba /('-')/\('-')\ admin@zee