Opacity and Images

On my web page, I wanted my social media links to stand out. I found out that you could mthe images in HTML opaque, or see through. I had an idea that if I could make an image opaque, could I show the full image on a mouse over?  

To get an image in HTML to become opaque, the process is quite simple. Under its CSS properties, you must alter the opacity Attribute. The value for it is between .1 an 1, being a percentage (10% – 100%).  The lower the percentage, the more opaque an image becomes.

In order to get the images to show on mouseover, they must be anchors (or links.)  This is because the <a> tag in html has a built in style for hover.  To alter this style, you simply use the tag a:hover in your css sheet.

From there, you can format the image any way you want.  I made the opacity 1.0 on hover, and it takes the image and makes it stand out from the other opaque ones.  You could also alter the size if you wished.  This is a unique effect I thought looked great in designing my webpage.

-Zack Hall


~ by zjh7cdm on February 11, 2013.

%d bloggers like this: