Thursday, 30 June 2011 15:42

Adding on Hover Flares

Written by 
Rate this item
(1 Vote)

This is something that I have done in subtle ways in various templates in the past, but on our new site, I have added some glow effects to some container images. After being asked how I did it, I thought I would show you how simple this is.

For a working example, check out our Templates page and hover over one of the images.
In the example, we have added some shadow to the image and a glow effect when you hover over the image.
Note, these images have a white border, which was added in the jpg file, but this can easily be done with css instead, we have done this elsewhere on the site.

For this example we modified the css for .itemIntroText img. In its normal state, we just have a small drop shadow and to do this, we used the following css:

.itemIntroText img {
-moz-box-shadow: 2px 2px 2px #bbb; /* FireFox */
-webkit-box-shadow: 2px 2px 2px #bbb; /* Safari / Chrome */
box-shadow: 2px 2px 2px #bbb; /* CSS */

To create the on hover effect, we created a class as follows:

 .itemIntroText img:hover	{
-moz-box-shadow: 0 0 20px #74869C, 0 0 60px #74869C; /* FireFox */
-webkit-box-shadow: 0 0 20px #74869C, 0 0 60px #74869C; /* Safari /Chrome */
box-shadow: 0 0 20px #74869C, 0 0 60px #74869C);} /* CSS */

If you want box shadows in IE, then you will need to use something like pie.htc so pop over to http://css3pie.com.

Read 183166 times Last modified on Thursday, 30 June 2011 16:57