Cara membuat galery gambar dengan hover sederhana

Hai Blogger kali ini saya ingin memberikan tutorial mengenai cara membuat galery gambar dengan efek hover sederhana, kenapa saya katakan sederhana karena kita tidak perlu untuk mensetting template blog kita dan memasukkan kode css di dalam template, cukup dengan memasukkan kode di bawah ini dalam posting blog kita dalam mode html

Berikut kodenya :

<style type="text/css">
/*DO NOT EDIT THE BELOW CODE OR IT WOULD NOT WORK.Code from http://www.avdhootblogger.com */
* {
margin:0;
padding:0;
}
body {background-color:#f5f5f5}
.avdhoot-image-gallery {
width:642px;
margin:50px auto;
}
.avdhoot-pack {
width:210px;
height:160px;
overflow:hidden;
background-color:white;
border:1px solid #ccc;
float:left;
margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.avdhoot-ctr,
.avdhoot-des {
height:150px;
border:5px solid white;
background-color:#ffc;
transition:margin-top .4s ease-out .4s;
}
.avdhoot-ctr img {
width:200px;
height:150px;
padding:0 0;
margin:0 0;
border:none;
outline:none;
max-width:none;
max-height:none;
background-color:black;
}
.avdhoot-des h4,
.avdhoot-des p {
margin:0 0 .2em;
padding:0 0;
height:70px;
}
.avdhoot-des h4 {
font-size:120%;
height:auto;
}
.avdhoot-des .des {
padding:10px 12px;
overflow:hidden;
}
.avdhoot-des .more {
color:white;
text-decoration:none;
display:block;
text-align:center;
font-weight:bold;
background-color:#f9a;
height:26px;
line-height:26px;
margin:10px 0 0;
}
.avdhoot-pack:hover {border-color:#bbb}
.avdhoot-pack:hover .avdhoot-ctr {margin-top:-160px}
.avdhoot-des .more:hover {background-color:#b50b42}
</style>
<div class="avdhoot-image-gallery" id="avdhoot-image-gallery">
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKR7Hvgnnv5XwagH-COACKBg2RJTrtwVAcJgwQxt-INf2yl7QNUj4u7xGhEv9d6UdrF_7rwjhAi6C-6u0TwTXIJB6RB2cflm129C6QvahHvsexx_j7lX6opd-yvJVJCSyU8cu4q6ohR5s/s1600/00+(7).jpg+(680%C3%971024).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9U33UA-5mZdos28kZrhGKf0xz6NLdihINJSkKjn8ly5LfjnIeXVJ3LJNkrHz439FuAmIylcWqB9BJX0NKYcFQ01DsXuOMbTFOSc0aRm4CggC-rd_mcEwGNH4353Zvu5To7sP_fA8nS08/s1600/00+(8).jpg+(800%C3%971200).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvWpHmaazznXsRGhqumZSe8sIZo5u1Ql42l-5sp9nQzIdaxaRMogiWjBUXD7zA8rwy3JoUOBa2QBVzipKdxmTotpUCsVOyAFKfSMHNBsLnY4ebdSxyuZrh_A1bWUjuIZzKemqfcychvI/s1600/4.jpg+(800%C3%971200).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7EdkH71voqNEn9E1iiOJJgrSwAhhjVxefqsMmpoUOczVq_yw5FvtiSN2ExlfONahol-jzMsWCLZLRGuD6pyYQ0pnth_GC0TSYqYwV0qve1drEqoYOD_6ANlaaQEw6DzcFKWuckg9-W4/s1600/000000125270-raluca_negrea-fullsize.jpg" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEyKCnrTvZnfJsob-pg7zR9m3XA3479jIgoczrzuZSRr513UWnre_yc3fS9ziOuxmIeYQCV_uCFrqa1iaIn9A_Svy1nD9uOaiiWEgU0ez3c2x9f1UXHLYokSbBFCIE_b6HmG4DMkRl6E/s1600/01+(2).jpg+(680%C3%971024).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywaRZQAZNWSv5sD61c23purVGTUkos1XVRQXvkbmin3RkkyGekNF-MvaE4B_d-CJEowWfJ-dZP8xpEKeoSuBQFIiXz3yZsdJuauwSwtvQG2YiobjoGRBv5oNF3aLIMOXGNshxQ0ohSmw/s1600/little_too_big_by_pure_insomnia-d2zqnwc.jpg" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>

Selamat mencoba...!!!

Sumber : avdhootblogger.com

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts