In this post i will show you How To Add an Animated Hover Effect Captions on Images in blogger. This effect is similar to the Featured Posts. When you hover your cursor over the image a caption scrolls up from the bottom. Captions include the title of the image, a description of it.
Demo/Preview Images Shown Below:
Steps/Procedure TO Add this Widget TO Your Website/Blogger:
Demo/Preview Images Shown Below:
- Go to Blogger Dashboard --> Design --> Edit HTML
- Backup your Template before making any changes to your blog
- Now Expand Widget Templates
- Find the code shown below using [ctrl+F]
]]></b:skin>
- Now Paste the Code shown below just before/above it
#image-hover {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
- Now save your template
- Now how to use this effect
- When you want to use this effect on an image then add the following code
<div id="image-hover">
<div id='figure'>
<img src="IMAGE-URL"/>
<span class='caption'>
<b>Image-Title</b>
Image Description
</span>
</div>
</div>
<div id='figure'>
<img src="IMAGE-URL"/>
<span class='caption'>
<b>Image-Title</b>
Image Description
</span>
</div>
</div>
- IMAGE-URL is the url of the image Replace this with your image url
- Replace Image-Title with the image title
- Replace Image Description with the image description
Keep Visiting for more new tips-tricks and news about blogger.
leave your valuable comments if any problem in installation.or any query/help/suggestion or your views about this post.
