The display property determines how an element is displayed, or whether it is displayed at all. While there are 17 possible values, I will only be focusing on three – block, inline and none. Personally, I feel that the last value of none is the most important of the three. However, an understanding of the first two properties is needed to utilize its full potential.

1. Display an element as a block

Quite simply, applying this property to an element means that the element will be displayed as a block level element, with a line break before and after the element. This is commonly applied to inline elements so that they respect other properties given to them. (such as absolute positioning)

Given the following link, which is inline by default:

<a id="my-link">Hi, I am a link!</a>

We can apply the display block property as follows:

/* Style for the link */
#my-link {
display: block;
}

Note that applying such a style will only make a difference if other properties have to be applied to the link which are not respected by inline elements.

2. Display an element as inline

Pretty much the same concept as above, except for the fact that we are now displaying the element as inline – there will be no line breaks and the element will not respect certain properties, such as positioning. This is usually the default for most elements, so no CSS is required unless overriding a previous property.

3. Hiding and displaying an element

This is where the display none property comes in – we can use it to display or hide elements under certain conditions, on hover for example. Since I have already done a tutorial on the nuances of the hover selector, I will not be going through them again.

Since an element which is hidden cannot be hovered over, we generally use the parent-child relationship of elements to make this work. Javascript may also be used for this purpose, but it is far more cumbersome, especially if you are already using an external CSS file. Given the following HTML:

<div id="parent">
<div id="child">
Hidden text!
</div>
</div>

We can use the following CSS to achieve the desired effect:

/* Style when no hover */
#parent #child {
display: none;
}

/* Style when mouse-overed */
#parent:hover #child {
display: block;
}

If the parent div is empty, it will not be visible. To make sure the parent div can be seen and hovered over, use the following CSS:

/* Style for parent div */
#parent {
height: 40px;
width: 60px;
background-color: #ccc;
}

That’s all you need to know – anything beyond these basics should be quite simple if you understand this property. Hopefully you will take what you’ve learned from this and let your imagination run wild!

This selector, like most styles, can be applied to absolutely any HTML element in your web page to create a rollover effect. A lot of people still use javascript to do this, which works but is deprecated. In other words, this is the ninja way to do things.

1. Applying hover to a link element

Say that you have the following element in your web page, just a basic link with the id ‘my-link’.

<a id="my-link">Hi, I am a link!</a>

The id tag lets us apply a style specifically to this element – a web page may only have one instance of a given id, which means you can’t give the id of ‘my-link’ to any more elements on your page. Let the link given above be the one we will be styling.

Now, to apply the actual hover effect, you would put the following code in your CSS – which should preferably be an external stylesheet.

/* Style when no hover */
#my-link {
color: #ccc;
text-decoration: none;
}

/* Style when mouse-overed */
#my-link:hover {
color: #000;
text-decoration: underline;
}

This will give you a basic text link that changes color and is underlined upon mouse over. Not good enough for you? Well, read on over to the next section…

2. Applying hover to a div element

What’s great about cascading style is it’s versatility – it can be applied to any kind of element to change it’s appearance in various ways. Let the following be the div element that you wish to apply styling to:

<div id="my-div">Hi, I am a div!</div>

I will give you a basic example, keep in mind that which styles you apply is totally up to you.

/* Style when no hover */
#my-div {
color: #ccc;
background-color: #fff;
text-decoration: none;
font-family: Georigia, serif;
padding: 5px;
}

/* Style when mouse-overed */
#my-div:hover {
color: #000;
background-color:#ddd;
text-decoration: underline;
border: 1px solid #000;
}

This should give you a div element that changes in appearance when hovered over. Of course, these are only example styles – you may choose to apply a different, better styling to your elements.

Note that while we only experimented with <a> and <div> tags here, the hover selector can be used for styling any HTML tags.

Well, that was all. Not too tough, was it? Hope you enjoy your new-found skills!

A note about pre-loading images

Maybe you’re one of those people who don’t like to see the short lived flicker that occurs when you hover your image links – the time the browser takes to load the rollover image. There are ways around that too, my favorite being the background positioning technique. You can read more about that here.

Getting Started

Before doing anything else, you must first decide on a fixed size for your image, or images. All subsequent images that need a hover description using the same CSS should have the same size as the first one, because we will be basing our measurements off of it.

For this tutorial, I will be using the scaled down image of a cloudy sky from stock.xchng, the free stock photo resource. This is what the original image looks like when resized to 300×200 pixels:

Preparing The HTML

The thing with CSS is that when using it for styling, there has to be something to apply the style to. Assuming all your images are not the same size and you want this effect on only a select few, we will enclose the image – along with the summary – in nested div elements.

Here is what my code looks like, and what yours should resemble:

<div class="imageshell">
<a href="your-url-here"><span>
<img width="300" height="200" alt="Cloudy Sky"
src="wp-content/uploads/2008/08/tut_cloudimg.jpg" />
<div>
This is a caption for this image, which depicts white clouds
against a beautiful blue sky. This space, besides containing text,
can also house other media – you can even treat it like a small
individual web page (within limits, of course).
</div>
</span></a>
</div>

Styling It With CSS

Okay, here’s the part you’ve been waiting for – here’s where the fun of making it work begins. Now before you pull out your stylesheet, I need to remind you that this code is based off the size of the image you are using, and you may have to modify it to suit your needs. With that out of the way, here’s the magic recipe:

.imageshell{
width:300px;
height:200px;
text-align:left;
}
.imageshell a:hover div {
color:#333333;
display:block;
}
.imageshell div {
background-color:#F3EBCC;
display:none;
width:290px;
height:190px;
position:relative;
padding:5px;
left:0px;
top:-200px;
}You will notice that the size of the inner div is smaller than the image by 10px each on height and width (or 5px on each side) – this allows the padding to expand it to fill the image. Of course, you are free to modify any part of the code as you please, for example changing colors, sizes and padding. Some modifications may break it, but that depends on what you are trying to do.

Note: The most probable thing you will need to tweak is the top and left attributes in the style for the inner div. This is because it depends on the default border and padding settings on your image from the pre-existing CSS.

The Final Product

I’ve removed the example that was here for W3C reasons, you will find the end product in the link gallery. Leave a comment if you have any issues. Demo here.

Step 1 – Doing it without the images

We’re starting off with the simple concept of anchors – links that link to links that link to nothing. Okay, maybe I need to explain that…an anchor, by itself, is something that exists for the sole purpose of marking a position on a webpage. Then, you can link to that anchor, which will essentially send anyone who clicks the link to the position defined by the anchor. Still don’t get it? Let’s go hands on.

First off, put this line of code right after your <body> tag:

<a name="top" />

This defines the very beginning of your document as the location of the “top” anchor. Next, let’s try linking to it – put the following code where you want your “Back to top” link to appear (you can change the text, of course):

<a href="#top">Back to top</a>

The ‘#’ in there tells your browser that this link is pointing to an anchor and not to an independent URL. After you’re done, try clicking the link. Does it work? If it doesn’t, go back and try again. :P

Step 2 – CSSing it up + images

Before we go any further, you will need to grab a couple of images: one will be the active link, and the other image will appear when the user hovers the mouse over that link. Let’s say one of the images is named link_normal.gif and the other one is link_hover.gif – note that they must be of the same dimensions, in this case let’s assume they are both 220px by 50px.

All you have to do to your actual code at this point, is to include the following code where the link is to appear:

<a href="#top" class=myanchorlink></a>

Comparing this code to the above without-images HTML, you may notice that there isn’t that much of a difference – all you did was replace the text with a div element. But where is the image, you ask? Well, we’re going to implement that now.

All the real magic will take place in your CSS file. I hope you know where your CSS file is – in case you don’t, you can always view your source and find it. For WordPress the CSS file is style.css in your current theme’s folder. After you find it, add the following code to the end.

.myanchorlink{
width: 220px; //use your own image’s width!
height: 50px; //use your own image’s height!
background: url(images/link_normal.gif); //your image url
cursor: pointer;
display: block;
}
.myanchorlink:hover{
background: url(images/link_hover.gif);
}

Voila! You’re done. Unless you copy-pasted my code without modifications, it should be working fine. If you did just copy-paste my code, it might not work because this is a tutorial that simply gives you an example to modify and implement with your own images.

If you have any problems, drop me a line and I’ll try to help you out.