The :hover property, in all of its glory

Without getting into javascript, perl, php, or ruby, it’s still possible to create a great-looking webpage using only basic HTML and CSS.

Enter, the :hover property.

We’ll start with some super basic formatting via a CSS id


Hooray.  Now, if we add a :hover property to our #foo id, we can make our text color change


And that’s all well and good but it doesn’t seem very useful.  Maybe you wanted to make an image partially transparent on a hover?



Okay that’s pretty cool.  This can actually be applied to more or less any CSS property!  Background colors, background images, display properties, aligns, margins, and so on!

Using margin properties liberally, we can create a quick and dirty expanding NavBar:

and the important part:



A lot of neat interactive content can be done with just pure CSS, particularly with CSS3.  

However, if you involve javascript, you can start getting into things like making multiple images change on a hover!

Here, we give the the image HTML tag a javascript property of ‘onmouseover.’ This will trigger exactly the same as the CSS hover tag, but will allow us to write code that will execute on the hover, rather than just changing CSS properties. Here, the onmouseover event finds the image in our HTML document id’d as “bigImage’ and replaces the source. Any javascript code could go here, but beware: there’s no guarantee an end-user’s browser will support javascript or have it enabled.

The end result:

A keen observer will note that a CSS hover property was used on the thumbnails, highlighting which one the user currently has the cursor on!

So go out and play with the hover property and make something cool!



~ by kylemagocs on September 10, 2012.

3 Responses to “The :hover property, in all of its glory”

  1. Showing the code and the images/effects that it produces really helps in stepping through the tutorial. Also, whether intentional or not, taking a screenshot of your code rather than inserting it into the post as text forces the user to at least re-write and learn the code, rather than just dropping it into their webpages.

  2. Hey Magocs. I like the screen shots. They make it interesting, the use og gifs is particularly helpful for this content. I can tell you put a lot of time into this and it translates to good quality. The one thing I would suggest is that you turn your code into text. It’s a pain on wordpress, but


    if you edit it in the text version (truly easier) should work nicely. WordPress WYSIWYG is finnicky for code.

  3. […] over the image. And it’s really really simple and easy to do. I know that Kyle Magocs did a wonderful and super detailed tutorial covering many bases of the hover property, but this is going to be super rudimentary for yinz who […]

Comments are closed.

%d bloggers like this: