.hov{display:block;width:245px;height:195px;background:url(http://calmestghost.com/images/FreshBlue.png)} .hov:hover{display:block;width:245px;height:195px;background:url(http://calmestghost.com/images/FreshGreen.png)} Demo:Code (Only Use ONE of the CSS Methods Below): CSS Sprites (New Method) .hov{display:block;width:245px;height:195px;background:url(images/hover.png)} .hov:hover{background-position:0 -195px}For this to work, simply stack the normal state image on top of your hover image making one image. They should be exactly the same size and stacked perfectly on top of each other. So in this example the image would be 245x390 pixels.CSS (Old Method) .hov{ display:block; width:245px; height:195px; background:url(images/hover1.png)}.hov:hover{ display:block; width:245px; height:195px; background:url(images/hover2.png)} Change the background URL to your image locations and adjust the width and height appropriately.HTMLChange # to whichever URL you wish.Avoid Flicker on Image Rollover (Only Necessary for Old CSS Method) This happens because the second image only loads on mouseover/hover. We can avoid this by preloading the images(s) and this can still be done non-JavaScript with CSS:CSS .preload{display:none}HTMLThis will preload the images without showing them or messing up your design. Use this method to preload all secondary images (the images to be seen on rollover). This is a much more reliable and lightweight method than the JavaScript alternative.That's it. There is certainly more style and techniques you can add, but this is THE most minimal way to create a rollover image effect, if it's possible to get simpler, let me know.Enjoy.Thanks for reading, Bryan
Demo:
Code (Only Use ONE of the CSS Methods Below):
CSS Sprites (New Method)
.hov{display:block;width:245px;height:195px;background:url(images/hover.png)}
.hov:hover{background-position:0 -195px}
For this to work, simply stack the normal state image on top of your hover image making one image. They should be exactly the same size and stacked perfectly on top of each other. So in this example the image would be 245×390 pixels.
CSS (Old Method)
.hov{
display:block;
width:245px;
height:195px;
background:url(images/hover1.png)}
.hov:hover{
display:block;
width:245px;
height:195px;
background:url(images/hover2.png)}
Change the background URL to your image locations and adjust the width and height appropriately.
HTML
<a href="#" class="hov"></a>
Change # to whichever URL you wish.
Avoid Flicker on Image Rollover (Only Necessary for Old CSS Method)
This happens because the second image only loads on mouseover/hover. We can avoid this by preloading the images(s) and this can still be done non-JavaScript with CSS:
CSS
.preload{display:none}
HTML
<img src="images/image2.png" alt="preload" width="0" height="0" class="preload" />
This will preload the images without showing them or messing up your design. Use this method to preload all secondary images (the images to be seen on rollover). This is a much more reliable and lightweight method than the JavaScript alternative.
That’s it. There is certainly more style and techniques you can add, but this is THE most minimal way to create a rollover image effect, if it’s possible to get simpler, let me know.
Enjoy.
Thanks for reading, Bryan
Other Reads:
RSS
Loading ...
