If you have started into the world of coding web pages then you are most likely familiar with HTML and CSS. These two languages are what the user interprets as text, images, and overall layout. For the most part they are pretty simple and you can pick them up pretty fast.
Although any time you are taking on a new challenge there are setbacks and frustrations along the way. CSS can be particularly frustrating without any teaching or direction. Often times people will be making things more complicated then they have to just because they don’t know proper techniques. Here are 5 useful simple tricks to help you along the way.
Easy Image Hover
Contrary to popular belief you do not need two images to produce quality hover affects. Simply by changing the opacity, your image will appear as if it is changing color. This works particularly well with social icons, especially if you got them from a free example and you only have one image to work with.
Here is some sample code you can use. Obviously you want to source your own images, and reference the right link. The image does NOT have to be within a link. You can do this anywhere on your page with any image.
First Some HTML
<div id=”imageHover”>
<a href=”YOURLINKHERE”><img src=”YOUR IMAGE SOURCE HERE”/></a>
</div><!–imageHover–>
Now Simple CSS
#imageHover img
{
opacity:0.8;
}
#imageHover img:hover
{
opacity:1.0;
}
Doing this successfully will give your image the appearance that it is glowing when you hover over the image.
