CSS Tip: Image Rollover effect


After working on wordpress themes for a while I’ve come across a few stylesheet techniques and figured I’d share so I’ve started a new category of posts. I’ll continue below.

Create an image rollover effect

Using just an image editor and some CSS it’s possible to create very nice rollover effects. A couple can be seen here with the navagation buttons up top and the comment box on the front page. The way this works is by creating your image a special way and then only displaying part of it at a time. The image should look like this.

See how the top is the part of the image that’s seen when not hovering over the comment box. The bottom part is only seen when you hover. The link is no different than a regular link it will just need to have a class added to it do show it should have the rollover effect.

<a href="http://clark-technet.com/" class="rollover" title="Link">Link</a>

Then the actual style would look like this. This would need to be placed in an external style sheet or in between

<style type="text/css"></style>

tags in your header. Info on this can be found here.

a.rollover {
display:block;
width:40px;
height:40px;
background:url(images/comment.jpg) no-repeat top center;
}
a.rollover:hover{
background-position:0 -40px;}

I’ll explain this code now. The display:block tells that it is a block level element and will allow a height and width to be applied to the link. Next we declare the height and width since the width of the image is 40px and half the height of the image is 40px those are the values we use. Then the background:… tells where the image is that it should repeat and the it should be aligned at the top center. Since the width of the link and the width of the image are the same it doesn’t really matter where it aligned horizontally.

Next comes the actual rollover effect, this depends on the :hover psudeo class in CSS which some very old browsers don’t support, like Netscape 6 and IE 3. The background-postion tells that the background image should be shifted horizontally 0 px and vertically -40px, ie up 40px. Thats it, it is that simple.

About Jeremy Clark

Small town IT worker with interests in all things technological and technical. Biggest interests are in web development especially the WordPress publishing platform and the community supporting it. Currently developing and maintain the free WordPress theme Techozoic. I'm also always available for hire.
This entry was posted in tips and tagged , , , , . Bookmark the permalink.

3 Responses to "CSS Tip: Image Rollover effect"

Leave a reply

Comments will be sent to the moderation queue.