Sometimes it is impossible to show full images. Therefore it is required to show small images. But small images are not clear thus an image hovering will clarify the details of the image.
Below is an example of image hovering effect:
Image Protected by © www.trickndtips.blogspot.com
Place mouse over the image and see effect. Now how to apply this effect.
1. Login to your dash board and go to Design > HTML.
2.Press "ctrl+f" and find ]]></b:skin>
Just above this code paste
3. Now to show image create a new post and select edit HTML instead of compose and place this code
Below is an example of image hovering effect:
Image Protected by © www.trickndtips.blogspot.com
Place mouse over the image and see effect. Now how to apply this effect.
1. Login to your dash board and go to Design > HTML.
2.Press "ctrl+f" and find ]]></b:skin>
Just above this code paste
Now save your template..thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
3. Now to show image create a new post and select edit HTML instead of compose and place this code
<a class="thumbnail" href="www.trickndtips.blogspot.com"><img border="0" height="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpR6kJzb6ctildspRRqbMCs43bRw_LTfdYZktk-x20b00H5Un-cR9dU-v9JZGYSyg922o6qojuat6iR08YeuiQPmtv77ZlZ3Ne5dHGG1WvwhlVySWFKRP1-59UoGEogt1o72WmEVJmqCh/s320/rose-flower-pictures-attractive-red-rose.jpg" width="150px" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpR6kJzb6ctildspRRqbMCs43bRw_LTfdYZktk-x20b00H5Un-cR9dU-v9JZGYSyg922o6qojuat6iR08YeuiQPmtv77ZlZ3Ne5dHGG1WvwhlVySWFKRP1-59UoGEogt1o72WmEVJmqCh/s320/rose-flower-pictures-attractive-red-rose.jpg" /><br />
Image Protected by © Your site address</span></a>
Image Protected by © Your site address</span></a>
Replace red code with your image url and publish your post. See the beautiful hovering efffect on your site.
If you like our post, Than make a small donation to Tips N Tricks.
It will Help us to maintain this blog.
Subscribe via Email| Follow @leadingdynasty |
0 comments:
Post a Comment