Showing posts with label img. Show all posts
Showing posts with label img. Show all posts

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!