Home » , , , , » Animated Image Galley Widget For Blogger With CSS Hover Effect

Animated Image Galley Widget For Blogger With CSS Hover Effect


Animated CSS Image gallery widget for blogger that shows a description and link on image hover. Very beautiful and awesome CSS hover effect to add it to blogspot blogs.


CSS Image Galley Widget For Blogger That Shows Description on Hover
CSS Image Galley Widget For Blogger That Shows Description on Hover


VIEW DEMO



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.

What is specialty of image gallery widget for blogger



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.

Title
Description
Read More link


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.

Maintains quality of images.
Loads very fast.
Makes template attractive because text no more appears in the image.


CODE


<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="http://3.bp.blogspot.com/-byMVZ9p5iC8/Ud582YB0qFI/AAAAAAAABII/0N-_0z5KgaY/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="http://4.bp.blogspot.com/-Edak-e7HVNA/Ud583G0nwCI/AAAAAAAABIQ/3rq_y4X7OqE/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="http://4.bp.blogspot.com/-8VX1I9GU5c8/Ud585aKgGZI/AAAAAAAABIY/Ud3eiTQ6YDw/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="http://1.bp.blogspot.com/-Mbxn1n8cSdE/Ud580LDmrFI/AAAAAAAABIA/F7_a0-T9x7Q/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="http://2.bp.blogspot.com/-onS0IP3Bh2g/Ud59hs95UrI/AAAAAAAABIs/0xdPWESxmsM/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="http://4.bp.blogspot.com/-vj-Pqh30B2U/Ud59fikjGTI/AAAAAAAABIg/dNJH0C3HkqM/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 represents the URL of the image. Insert your images here.
..... Color represents the title of your post.
..... Color represents a description of your post.
..... Color represents the URL of your post.

Well we have shared another widget related to image like:-

(1) Image accordion widget for blogger

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:-

(2) Tabbed content box widget for blogger.

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



Blogger Widgets


Popular posts widget for blogger
Related posts widget for blogger
Email Subscription Widget for blogger
Social media sharing widget for blogger
Navigation menu widget for blogger
Comments widget for blogger


Title: Animated Image Galley Widget For Blogger With CSS Hover Effect Author: Rohan Mod
Description : Animated CSS Image gallery widget for blogger that shows description and link on image hover.Very beautiful and awesome css hover effect to add it to blogspot blogs.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS