Image effect make your article more awesome. In the past i posted about Image zoom hover effect. This time we will use CSS so that they comes with the sliding panel on mouse hover with image description. This is hover effect with sliding panel. For your convenience i provided demo 
This is just a simple example of image hover effect with sliding panel in blogger
Step 1 (Add CSS)
Blogger Dashboard → Design → Edit HTML
Find the following code using F3
<head>
Now paste the following code just after <head>
<link type="text/css" href="https://rafiblog.googlecode.com/svn/newjava/SidingPanel.css" rel="stylesheet" />
And save the template
step 2 (Implement Effect in Images)
Now write a post in HTML mode. Now post below image code
<div class="imagepluscontainer" style="width: 263px; height: 199px; z-index: 2;">
<img src="http://4.bp.blogspot.com/-MWjcrO6R-H0/UCOShFDuhSI/AAAAAAAAAmc/XBY-l3uYAhA/s1600/google%2Btips.png">
<div class="desc">
This is just a simple example of image hover effect with sliding panel in blogger
</div>
</div>
Changes
Change with your image link replacing http://4.bp.blogspot.com/-MWjcrO6R-H0/UCOShFDuhSI/AAAAAAAAAmc/XBY-l3uYAhA/s1600/google%2Btips.png
Change the width and height as your choice from here width: 263px; height: 199px
Replace the description about image from here This is just a simple example of image hover effect with sliding panel in blogger
Change here <div class="desc"> if you want to change description sliding direction
If you want that sliding panel comes from right side then add desc rightslide in place of desc
If you want that sliding panel comes from left side then add desc leftslide in place of desc
If you want that sliding panel comes from upper side then add desc upslide in place ofdesc
For example view the demo
View Demo
Please share the article with your friends if you like
Related Posts : Blogger Effect
0 comments:
Click Here To add Comment