Animated Image Galley Widget For Blogger With CSS Hover Effect

This is a beautiful image gallery widget for blogger. Very beautiful and attractive. It is the CSS hover effect which gave it animation. This image gallery widget is fast in loading and maintains quality of images. In this widget Description, link and title slide to upwards when you hover your mouse cursor on images. In our last post we discussed email subscription widget for blogger about 10 types. Now we are discussing image gallery widget and we will continue to give you more awesome and beautiful gallery widget for a few days so that you can choose the best for your blog.

It is the CSS hover effect that makes it special. There are many types of image gallery widget but there is something special that makes it unique. When you hover your mouse on the images then a sliding description with three option appears as.

It looks like they are sliding upwards. And, when you hover your mouse on the read more link it changes color. This is all done by the CSS coding which is called hover effect. There are few more qualities of this widget.

<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/AVvXsEgWjZ9mEbnw9fcBIEpFD-sCjy96zbEBC6WnT72yOOZlho-y6t6Ji0x36OUHcQrEP7ZVW3Ijz7UkoQ5m6nD56SyyPIemgLuMh3ugCBB0Dikm8oCFLKdpTD4GsMzsGcnWqwwz3X0w_Ynu3lk/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/AVvXsEgYtetADRjhcHnNCyG1OSlsTZh6R7ArIrFU69ZLDrteN2sx0N7NF7XJ2xspZVQLwPsfV-bdDGnW_q03_xUzw5M06rO2NZ1Pw4xXE70MYR9DykbQmHJCGhdqU8Roi62THaWnxH2lnyDeiTM/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/AVvXsEjThiOKPwnieLjRKsMFRK0pW4qK5KI7o6O9LNlwEwnrN75SoLgLnJdUTuLaE2tQGxRRxeXXGy8_mEpRoCP_YDuD7Le7tN7mayNP9qS37xgIbIj4vBhouTQpxUTXkmHmey3ofCHHXTCiGLY/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/AVvXsEhV4mzuCltq0NWDftHg3s6Jf6LFOGBRi3JFLX21zc3nxm28Pmbe8wouLJ7oBQwX8mzI86QeQ1V6aB_5frpDD28h0hwtxWlqUJ0dAPgKnxvZFfGbqTnZBbwB-EoCY1rSsDwErXS4-V_ijAQ/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/AVvXsEglpuNqOZs7lwwCKcSpDHYmlyAOzfV810vmScue9JeDrgJxjY8R1e0YpMLYJnc2SnUqOlxEtyjAG5C23RS4b8YTdYFPS38yoWhP2EZpXLtTe5J7-QU5MH4xyFERIxcvgBVWm2FB9TLPs58/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/AVvXsEgBVfX5z1Ksfe9cvrZ3j8LcJpXRyX0qZF93NpjCcQh9nea6uIInV-my1_WJfR2alyYGJm7AhVm-URWuhfxihEeUlVkfr5InirZk4uK2wXx_fiHYXMZ5AVDI7ZaVnHvq4uqOOYIKcCNUSjs/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>

Here we used to represent custom posts with awesome images you can use this widget to promote a few of your best posts.

Another widget that you can use to promote your featured posts is putting them in a tabbed content box so if you want to do this then read this post:-

In this widget you can put your most favorite post with social media sharing icons.

Well if you want to use this code then below is the download button for you to download the html and css code.

Download code