It is very common to display an outline when you hover over something. This snippet gives you what you need to join the club.

The Example

Below is an example of this snippet running (you can also view it in its own page):

When you hover over each image, a black outline displays around the image.

The HTML

The HTML for this example look as follows:

<div id="main">
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/blue_at.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/gray_amp.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/green_percent.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/orange_asterisk.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/red_question.png" width="100"></div>
<div class="pictureContainer">
<img alt="#" height="100" src="http://www.kirupa.com/html5/examples/images/yellow_sharp.png" width="100"></div>
</div>

This corresponds to the six images that you see.

The CSS

The style rules for tying the look along with the hover behavior together can be seen below:

body {
	background-color: #EFEFEF;
	padding: 20px;
}
#main {
	height: auto;
	width: 380px;
}
.pictureContainer {
	display: inline-block;
	float: left;
	height: 100px;
	margin: 10px;
	width: 100px;
}

Further Exploration

If you want to know more about this snippet or other clever ways it can be used, check out the following articles:

• Changing Focus Styles
• Display an Outline (Not a Border!) on Hover

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!