Animated Image Gallery Widget For Blogger With CSS Hover Effect
CSS Image gallery for Websites/Blogs
Live Demo
The Css
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}
The Html
<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/AVvXsEjQ4HgtUPZ927LrREWMDX5ERcTw1_SXmSStNRjWj3Kv9KDsibjMc1XERV5nTjwbUUyvybDnFyLeKWfVJCPq71BkmJnp6u4sk1ZW6epWO3sXSpm1ShEWETvPfVAGCRV9GVtaXK4hep0gcXs/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/AVvXsEgsJ_reMwQ6jpJvY5nQnNyXi2dJwwK-LuqxVC37VGrdokYQ2jkfxAhYzo-X2hf7Io0wbQBLsRLin6lahPzj32a6ZpXW4jdngeifArLbo_guGUxLE09O3bG-TGkgidq5hExmfg0hRl512bc/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/AVvXsEgveCviolj1qUIJFLlUZbHXLuH4ps4oms6YS3iI-J3B8ZyR_7Wx959Goariz41AItMvVkasbVzbt7U3NLfdX10O9XKvM2EzCeyc7crMnQ3ayXNymUr_SgiGCOQJT3BfMZC2BeutFyAG3QQ/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/AVvXsEjqa-RykENgStkcZu6_dojKXc7wLHFoF5CMTCamzSrbda9uvlITqbDRqH41p8TCObjqwfpE0XGHp33M3ARFTZ9CcFsmAc2i2LDW9hbSyC1GDJcvFnHi6a-4fPID7jr_T4EzMHAaTKAUBMg/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/AVvXsEg2hLGAPdbn3NsLfhlELidpCw_04sBYYnHqVEd3A7QHBLiPQw9N3hrXiQzYd358QI0rc4yeVKaC6u-i3-XNj6rHTCjEHpvQqD3R4tiNn6-_ozR7-kU1IdhaXtghCOSEagY_lVfysoZ07CQ/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/AVvXsEg3JZ41A5z5_-l77QMtfxsgYcfmAGsoNMuLpjlWHTyKxJdiwdfx91JNXmCDxcwP9oiqowpOeQXbhFDVH2X1SYxzn4Woq7MdA8NqPMWwug9g0_hutXBM3JUwijbx4wL6qhqIXEuAHrAFMfg/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>
<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4HgtUPZ927LrREWMDX5ERcTw1_SXmSStNRjWj3Kv9KDsibjMc1XERV5nTjwbUUyvybDnFyLeKWfVJCPq71BkmJnp6u4sk1ZW6epWO3sXSpm1ShEWETvPfVAGCRV9GVtaXK4hep0gcXs/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/AVvXsEgsJ_reMwQ6jpJvY5nQnNyXi2dJwwK-LuqxVC37VGrdokYQ2jkfxAhYzo-X2hf7Io0wbQBLsRLin6lahPzj32a6ZpXW4jdngeifArLbo_guGUxLE09O3bG-TGkgidq5hExmfg0hRl512bc/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/AVvXsEgveCviolj1qUIJFLlUZbHXLuH4ps4oms6YS3iI-J3B8ZyR_7Wx959Goariz41AItMvVkasbVzbt7U3NLfdX10O9XKvM2EzCeyc7crMnQ3ayXNymUr_SgiGCOQJT3BfMZC2BeutFyAG3QQ/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/AVvXsEjqa-RykENgStkcZu6_dojKXc7wLHFoF5CMTCamzSrbda9uvlITqbDRqH41p8TCObjqwfpE0XGHp33M3ARFTZ9CcFsmAc2i2LDW9hbSyC1GDJcvFnHi6a-4fPID7jr_T4EzMHAaTKAUBMg/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/AVvXsEg2hLGAPdbn3NsLfhlELidpCw_04sBYYnHqVEd3A7QHBLiPQw9N3hrXiQzYd358QI0rc4yeVKaC6u-i3-XNj6rHTCjEHpvQqD3R4tiNn6-_ozR7-kU1IdhaXtghCOSEagY_lVfysoZ07CQ/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/AVvXsEg3JZ41A5z5_-l77QMtfxsgYcfmAGsoNMuLpjlWHTyKxJdiwdfx91JNXmCDxcwP9oiqowpOeQXbhFDVH2X1SYxzn4Woq7MdA8NqPMWwug9g0_hutXBM3JUwijbx4wL6qhqIXEuAHrAFMfg/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>
Customization
.....Color - URL of image......Color - Title of your post.
.....Color - Desription of your post.
.....Color - URL of your post.
