Membuat Effect gambar pada HTML dan penjelasannya part 1

Pada postingan hari ini saya akan membagikan script CSS dan HTML yang digunakan untuk menimbulkan effect pada gambar pada halaman web. Untuk anda yang masih bingung apa itu css dan cara menyisipkannya pada halaman web HTML, baca artikel ini.......... . 

Yang saya share ini hanya beberapa saja dari sekian banyak effect gambar pada HTML yang dapat dibuat oleh bahasa pemrogaman CSS. Berikut ini beberapa Effect gambar pada HTML dan penjelasannya part 1 .

• Script CSS umum.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #00FF00;
}
.pic {
border: 5px solid #fff;
float: left; height: 250px;
width: 250px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}

Penjelasan sederhana :

1. #00FF00 merupakan warna dasar background halaman web anda.
2. 5px merupakan tebal border atau bingkai dari gambar tersebut.
3. height: 250px; dan width: 250px;merupakan ukuran tinggi dan lebar dari bingkai tersebut.

#ganti sesuai selera anda.

• Effect gambar membesar(zoom) jika disentuh kursor.

Untuk effect gambar yang pertama ini, cara kerjanya dengan meletakkan kursor pada gambar tersebut lalu gambar itu akan menimbulkan hover(effect) membesar (zoom).

Script CSS :

.zoom img {
height: 250px;
width: 250px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.zoom img:hover {
width: 400px;
height: 400px;
}

Penjelasan :

1. .grow img {
   height: 250px; = sesuaikan dengan tinggi (height) pada Script css umum.
   width: 250px; = sesuaikan dengan lebar (width) pada Script css umum.
2. .grow img:hover {
   width: 400px; = Effect saat disentuh kursor (ukuran lebar).
   height: 400px; = Effect saat disentuh kursor (ukuran tinggi).

Script HTML :

<div class="zoom pic">
<img src="url/nama gambar">
</div>
Penjelasan :

1. url/nama gambar = nama gambar yang sudah anda siapkan dalam 1 folder(sertakan ekstensi filenya), ex : zoom.png. Atau alamat url gambar.

• Effect gambar mengecil jika disentuh kursor.

Untuk effect gambar yang pertama ini, cara kerjanya dengan meletakkan kursor pada gambar tersebut lalu gambar itu akan menimbulkan hover(effect) Mengecil .

Script CSS :

.kid img { height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.kid img:hover {
width: 250px;
height: 250px;
}
Penjelasan :

1. .grow img {
   height: 400px; = Effect sebelum disentuh kursor (ukuran tinggi).
   width: 400px; = Effect sebelum disentuh kursor (ukuran lebar).
2. .grow img:hover {
   width: 250px; = Effect saat disentuh kursor (ukuran lebar), (dapat disesuaikan dengan Script CSS umum).
   height: 250px; = Effect saat disentuh kursor (ukuran tinggi), (dapat disesuaikan dengan Script CSS umum)..

Script HTML :

<div class="kid pic">
<img src="url/nama gambar">
</div>

Penjelasan :

1. url/nama gambar = nama gambar yang sudah anda siapkan dalam 1 folder(sertakan ekstensi filenya), ex : zoom.png. Atau alamat url gambar