The Problem

A co-worker of mine, Nick Papadopoulos recently wanted to create an effect on his portfolio whereby an icon appears over top of his screenshots when visitors mouseover them.

I pointed him to this article I found: http://cssglobe.com/post/1238/style-your-image-links

But Nick quickly informed me that Internet Explorer 7 gives a security bar warning when using that method.  So I ventured to provide a solution to this problem and my first instinct was to work with opacity in CSS.  The problem was in order for this to work IE needs specific CSS properties and adding the filter property through the CSS once again triggers the security warning in IE7– not an acceptable solution.

The Solution

So here is the solution I was able to come up with which works off of 2 images and some clever HTML markup with CSS.

Step 1: Images being Used

Our first image is the one we want to apply the hover state icon on top of, in our example it is a cropped screenshot of a web 2.0 e-commerce template that Nick has designed:

madisons.png

The second image is our actual hover state icon or image.  In this example I’ve made a PNG image with some alpha transparency so that when this image is overlayed on top of the cropped screenshot, it will dim the screenshot and you will see the plus sign at the top left.   You can be creative here and have different type of effects or indicators.

hover.png

Step 2: HTML Markup

<div class="hover_icon_container">
	<img class="screenshot" src="img/madisons.png" border="0" alt="Description of Image" width="360" height="142" />
	<a class="hover_icon" href="http://google.com"><img src="img/hover.png" border="0" alt="" width="360" height="142" /></a>
</div>

The HTML consists of a div container and the madisons.png image which is the cropped screenshot. Our anchor tag follows and this actually links our transparent hover.png image. We do this so we can absolutely position this hover over the cropped screenshot and the anchor link will still work as the hover.png image will be the top most layer, it is the element that we need to link.

Step 3: CSS

div.hover_icon_container {
	height: 142px; width: 360px;
	position: relative;
}
 
	div.hover_icon_container img.screenshot {
		border: 1px solid #c8c8c8;
	}
 
	div.hover_icon_container a.hover_icon {
		display: none;
		height: 142px; width: 360px;
		position: absolute;
		top: 0; left: 0;
	}
 
	div.hover_icon_container a.hover_icon:hover {
		border: 1px solid #000;
	}
 
	div.hover_icon_container:hover a.hover_icon {
		display: block;
	}

Nick also wanted a border on his screenshots so here in the CSS we apply a border to the .screenshot class. Then for our anchor tag and hover.png image we absolutely position it to the parent container so that it is overlayed over top of the screenshot image. Finally we hide this hover state and only display it when the user hovers over the parent container.

Final Product

Live Preview

Download Files

Download Demo Files

Related posts

• No related posts.