Giving feedback when users are hovering over something that is clickable or interactable (is that even a word?) is generally considered good design. For text, you have many ways of indicating a hover - ways such as underlines, color changes, etc. For blocky, box-like things like images or divs, one of the most common things you can do is show an outline or a border around the element when you hover.
Below is an example of what I am referring to:
What you are hovering over are images. When you hover, a black outline is displayed around the image. In this tutorial, I will teach you how to do that.
To follow-along, go ahead and create a new HTML document and copy/paste the following HTML into it:
<!DOCTYPE html>
<html>
<head>
<title>Image Slide using CSS3 Transitions</title>
<style>
body {
background-color: #EFEFEF;
padding: 20px;
}
#main {
height: auto;
width: 380px;
}
.pictureContainer {
display: inline-block;
float: left;
height: 100px;
margin: 10px;
width: 100px;
}
</style>
<meta content="css3, transition, image, slide" name="keywords">
<meta content="What the title says, yo!" name="description">
</head>
<body>
<div id="main">
<div class="pictureContainer">
<img alt="#" height="100" src="//www.kirupa.com/html5/examples/images/blue_at.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="//www.kirupa.com/html5/examples/images/gray_amp.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="//www.kirupa.com/html5/examples/images/green_percent.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="//www.kirupa.com/html5/examples/images/orange_asterisk.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="//www.kirupa.com/html5/examples/images/red_question.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="//www.kirupa.com/html5/examples/images/yellow_sharp.png" width="100"></div>
</div>
</body>
</html>
Once you have pasted all of the above lines, go ahead and preview in your browser. You will see something that mostly looks like the example you saw above. You'll see six neatly arranged images. The main difference is that hovering over any of the six images does absolutely nothing. We'll fix that together next.
What we want to do is display an outline when you hover over each of the images. For our particular example, the style rule that would target every image on hover would look as follows:
.pictureContainer img:hover {
}
Take a quick look at your HTML to see why this rule works. With this rule, I am targeting all image elements that live inside an element whose class value contains pictureContainer. To designate that this rule is triggered on hover, I mark this style rule with the hover pseudo-selector.
All that is left is to specify the outline. Traditionally, when you think about defining this solid colored line that goes around an element, you naturally gravitate towards the CSS border property. Besides its stunning good looks, there is one fatal flaw with the border property. It affects layout.
When you assign a border to an element that does not have a border assigned, assigning that element a border will cause that element to shift noticeably. Hover over the image below to see this undesired behavior in action:
Notice that as you hovered over this image, the contents shifted a bit. To get the desired effect without all of this shifty business, use the outline property instead.
In your .pictureContainer img:hover style rule, add the following line:
.pictureContainer img:hover {
outline: #333 solid 4px;
}
If you preview your example now, you will notice that hovering over each of your images displays a solid color around the outside of each image. That's exactly what we wanted, and we didn't have to deal with the layout issues found with using a border.
If you absolutely need to use a border to provide visual feedback when you are hovering over an element, you can still do it with some extra work. Specify a default border on the element whose border size is the same as the border that you will display on hover. On this default border, you can specify the color to be the same as your background or transparent or whatever.
By having this default border, you ensure that your layout takes into account the size taken up by it. This ensures that when you hover and the hover border appears, your layout doesn't change because the space taken up by your hover border is the same as the space taken up by your default border.
I don't think I could have explained this in a more verbose manner using more instances of the word border even if I tried.
So, there you have it. You just learned a very easy way of specifying an outline on an element when you hover over it. If you've never used the outline property before, you may have just made a new best friend. This friend does have some expensive hobbies...such as crashing parties involving focus styles, form elements, and hyperlinks. Read my Changing Focus Styles article for the inside scoop on that.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
