awesome CSS image styles for blogger websites

Hello friends! in this post i’m sharing 3 CSS image styles for your blog / website.
DEMO
CSS Facebook Style
{
border: 1px solid #CCC;
padding: 4px;
}
div.facebook a:hover img {border: 1px solid navy;}
div.facebook a:hover img {color: red; /* irrelevant definition to overcome IE bug */}
<div class=”facebook”>
<a href=”#”><img src=”images/your_image” /></a>
</div>
CSS Border Style
{
border: 2px solid #999;
padding: 4px;
}
div.border img {padding: 4px;}
div.border a:hover img {border: 2px solid #333;}
div.border a:hover img {color: red; /* irrelevant definition to overcome IE bug */}
<div class=’border’>
<a href=’#’><img src=’images/your_image’/></a>
</div>
CSS Opacity Style
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.opacity img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
<div class=’opacity’>
<a href=’#’><img src=’images/your_image’/></a>
</div>
Bir cevap yazın