Saturday, October 13, 2012

CSS img shadow and change border on hover

For example, you have html a tag as the following:
<a class= 'aclass' href='aurl' title='short text' target='_blank'><img src='imgurl' style='width:160px;  height:160px;' class='ish' alt='short text' title='short text' /></a>

Let try the css below:

.aclass img
{
margin: 3px 4px 5px 4px;
border: 1px solid #C0C0C0;
}

.ish
{
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
-goog-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=120, Strength=5);
}

img.ish:hover
{
border: 1px solid green;
}


Subscribe to RSS Feed Follow me on Twitter!