20 Haziran 2013 Perşembe

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
div.facebook img
{
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
div.border img
{
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 img
{
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>

0 yorum:

Yorum Gönder