Your Customers are Mobile, you will be too …

Just a quick little tutorial on how make images appear to highlight when hovered over. If I get more time later today I will make up for how short and sweet this tutorial really is.

The effect we are going to create today with CCS3 will work in all modern browsers and is probably one of the easiest to achieve is CSS3 as it only requires 2 lines instead of half a dozen to be accepted by all browsers. As can be expected the second line is only for IE.

First step we are going to dull the image slightly and make it blend in with its surrounds slightly. This will help the image to look like it belong rather than having just been slapped on your page with no rhyme or reason.

To do this we are going to use the opacity property. A value of 1.0 opacity is not see through at all. 0.0 on the other hand you will see right through the image as if nothing was there. You can go to 2 decimal places with you opacity levels. So 0.75 would be 25% see through. This is the CSS3 standard for applying it.

opacity:0.6;

Short and sweet and pretty easy to remember. However IE does not recognise this surprise surprise. So to make it work we need to add the following line so that it will work in IE browsers.

filter:alpha(opacity=60);

Again pretty easy just remember with IE’s command line 100 is non see through ans 0 is completely see through.

So for this exercise we are going to make images 60% opacity which would look like this in our CSS.

img
{
  opacity:0.6;
  filter:alpha(opacity=60);
}

Do not use this code directly yourself in your webpage. You will need to add a class or div name to it. Otherwise you will apply the CSS to all images in your page including any header or footer graphics. Not something many of us would want to do. So make sure you only apply it to images in say your content div.

Not to make the image highlight when hovered. All we do for this is set the opacity to 100% on highlight. Like this:

img:hover {
  opacity:1.0;
  filter:alpha(opacity=100);
}

Again make sure you apply it to the same areas of the website as you did before. Although this is not so critical. If you haven’t changed the opacity on another image somewhere else on the site setting the opacity to 100% on hover isn’t going to do anything to anything else.

And there we have it. Images are now slightly blended into your website until someone hovers over them cause them to brighten compared to their surroundings.

5 Responses to CSS3 Image Hover Highlighting

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: