You welcome Erxino ?? Hope you find a better way. Kevin Heath, that works. It is also possible to use another method that consists in CSS Transitions. It is useful for those who don’t know or don’t want to run Jquery for security reasons. For that you have to edit the CSS of your site “style.css” or other one you use as main CSS Spreadsheet. After that you need to have two images to create the “rollover” effect.. One to Stay on “Top” and the other to stay in “Bottom” which will be revealed when the user “mouseouver′s” the image/icon.
Adding this Rule to that CSS will create a smooth transition that shows an image on top of another.
CSS
/* Start of Hoover Img Animation */
#Hoover_Animation {
position:relative;
height:37px;
width:58px;
margin:0 auto;
}
#Hoover_Animation img {
position:absolute;
left:0;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
#Hoover_Animation img.top:hover {
opacity:0;
}
/* End of Hoover Img Animation */
Then in your WordPress Post or Page and better in “text mode” you can paste and edit the HTML markup below replacing the comments i′ve write inside the tags.
HTML MARKUP
<div id="Hoover_Animation">
<img class="bottom" src=" Link of Image to show when the User Hoover " alt=" some cool Meta Here " /><a title=" some other cool Meta Here " href=" your urls link here " target="_blank">
<img class="top" src=" Link of Image to show on top and when the User Hoover Out " alt=" <strong>some cool Meta Here " /></a>
</div>
Original Concept By CSS3 = Awesome
