I knew there had to be a way to make a rollover image effect using only CSS (JavaScript can become quite cumbersome with PHP). Here is a style that I created this weekend.
Just add the CSS section into your style sheet and the HTML code in the body of your page. Be sure to change the image height and width. If there is a problem with the images aligning, set '.btn img' width and height to the pixel size of the image. With a little tweaking, this can also be used to make a cool dynamic drop-shadow effect.
Enjoy!
Just add the CSS section into your style sheet and the HTML code in the body of your page. Be sure to change the image height and width. If there is a problem with the images aligning, set '.btn img' width and height to the pixel size of the image. With a little tweaking, this can also be used to make a cool dynamic drop-shadow effect.
Enjoy!
cool, CSS, effects, html, Javascript, no JavaScript, pseudo-classes, rollover
/* CSS Code */
.btn { background-image: url("image2.png"); height: 100px; width: 100px; margin: 0; padding: 0; }
.btn img { border: 0; width: 100%; height: 100%; }
.btn a, .nav a:link, .btn a:visited { display: block; }
.btn a:hover img { visibility: hidden; }
/* End CSS Code */
/* HTML Code */
<div class="btn">
<a href="#"><img src="image1.png"></a>
</div>
/* End HTML Code */
