feature post widget-V2 for blogger

Before I had shared a CSS3 featured post widget with cool animation but this widget is having sleek and simple design which will give a new look to your blog.Yes,this one more widget to spice up your blog with featured posts.

This feature box is having following features:

4 column
fix image size
CSS3 animation
Sleek design
Browser capable
browser friendly

Demo

Now let start

Go to layout>add a widget (Use the full page widget section)

Then,add the following script in it

<style>
.befeaturev2
{
background: #474747;
background: linear-gradient(to bottom, #474747 0%,#3e3e3e 100%);
background: -moz-linear-gradient(top, #474747 0%, #3e3e3e 100%);
background: -ms-linear-gradient(top, #474747 0%,#3e3e3e 100%);
background: -o-linear-gradient(top, #474747 0%,#3e3e3e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#3e3e3e));
background: -webkit-linear-gradient(top, #474747 0%,#3e3e3e 100%);
border: 2px solid #3e3e3e;
border-radius: 15px;
height: 200px;
margin: 0 auto;
paddding: 10px;
padding: 10px;
width: 850px;
}
.beboxv2
{
float: left;
height: 200px;
margin-left: 10px;
width: 200px;
}
.beboxv2 p
{
color: #f2f2f2;
font-family: verdana;
font-size: 11px;
margin: 0;
padding: 3;
}
.beboxv2 img
{
border: 2px solid #000;
border-radius: 10px;
height: 100px;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
width: 180px;
}
.beboxv2 img:hover
{
opacity: 0.8;
}
.beboxv2 h3
{
font-family: verdana;
font-size: 18px;
font-weight: normal;
margin: 0;
padding: 0;
}
.beboxv2 h3 a
{
color: #fff;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
text-decoration: none;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.beboxv2 h3 a:hover
{
color: #c6c6c6;
}
</style>

<div class="befeaturev2">
<div class="beboxv2" style="margin:0;">
<img src="IMAGE_URL"/>
<h3><a href="#">Hey its just demo</a></h3>
<p>It is just a demo description. It is just a demo description. It is just a demo description. It is just a demo description. </p>
</div>
<div class="beboxv2">
<img src="IMAGE_URL"/>
<h3><a href="#">Hey its just demo</a></h3>
<p>It is just a demo description. It is just a demo description. It is just a demo description. It is just a demo description.. </p>
</div>
<div class="beboxv2">
<img src="IMAGE_URL"/>
<h3><a href="#">Hey its just demo</a></h3>
<p>It is just a demo description. It is just a demo description. It is just a demo description. It is just a demo description. </p>
</div>
<div class="beboxv2">
<img src="IMAGE_URL"/>
<h3><a href="#">Hey its just demo</a></h3>
<p>It is just a demo description. It is just a demo description. It is just a demo description. It is just a demo description. </p>
</div>
</div>