That’s quite the title isn’t it?!  Well over the past couple of weeks I went on a Visa frenzy in an effort to revamp my home desktop/office.  Using my Toshiba Satellite laptop as a desktop worked well for the longest time but I got a sudden urge to upgrade my setup at home simply because the laptop as a desktop felt restricting.  I was no longer using my laptop as a laptop but as a desktop and this bothered me somewhat.  I lost the luxury of portability because I had all these cables and USBs hooked up to my laptop so I never wanted to move it from its spot.

So I thought to myself, this would be a great time to build my first computer!  Suprisingly enough I thought to myself, I haven’t built an entire computer from scratch by myself ever! Sure I’ve serviced computers many times, I know how to install ram, swap hard drives, and do basic hardware stuff- I have just never built a computer from its individual parts.  In order to do this, I turned to some trusty people over at the RedFlagDeals.com forums.  I knew the forum is filled with tech savvy and money savvy people.

Surely enough RFD users came and provided immense help in choosing parts for the computer I wanted to build.  Although I do have to admit, they successfully pushed me to spend about $500 more than I was hoping to do but who can blame them. ;)  The computer build also went from an AMD Phenom II X4 base to an Intel Core i7 920 with several heated debates about platform versus price.  The users at RFD didn’t fail to disaapoint though because through their heated discussions I was able to come to my own conclusion that going the Intel Core i7 route would be the better solution for my needs.  Then parts were dissected into what would fit into my computer build and I put in an order through NCIX as they offer an incredible almost no questions asked price match policy and Canadians outside of BC only get charged for GST!  So NCIX offered the best cost effective store to purchase these awesome new computer parts from. (continue reading…)

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