4 column featured widget for blogger

What I could say about this thrilling pure CSS3 widget that can really spice up your blog with metro style featured widget.The widget is really fascinate your visitors and will visit more pages than before.
This widget have the following features.

Pure CSS3 animation
Browser friendly
4 columns
Fixed image size means no problem to change the image size.
Metro style

Demo

So lets start.

Backup your template
Go to layout >add a widget (but make sure the widget have the full length like I have shown below)

Now paste the following code

<style>
.befeature
{
height: 250px;
overflow: hidden;
width: 900px;
}
.bebox:hover
{
margin-top: -180px;
}
.bebox
{
float: left;
height: 500px;
margin: 0;
margin-left: 1%;
moz-transition: all .3s ease-in-out;
ms-transition: all .3s ease-in-out;
o-transition: all .3s ease-in-out;
overflow: hidden;
padding: 180px 0 0 0;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
width: 24%;
}
.beupbox
{
height: 60px;
margin: 0;
overflow: hidden;
padding: 5px 10px 0px 10px;
width: 100%;
}
.beupbox h2
{
color: #fff;
font-family: Segoe UI light;
font-size: 22px;
font-weight: lighter;
margin: 0;
padding: 0;
width: 95%;
}
.beupbox h2 a
{
color:#fff;
}
.bedownbox
{
height: 400px;
margin: 0;
padding: 0px 10px 10px 10px;
width: 100%;
}
.bedownbox p
{
color: #fff;
font-family: verdana;
font-size: 13px;
font-wieght: normal;
}
#bebox1
{
background: #3e3e3e url('FIRST_IMAGE_URL') no-repeat;
background-size: 100% 180px;
}
#bebox2
{
background: #3e3e3e url('SECOND_IMAGE_URL') no-repeat;
background-size: 100% 180px;
}
#bebox3
{
background: #3e3e3e url('THIRD_IMAGE_URL') no-repeat background-size: 100% 180px;
}
#bebox4
{
background: #3e3e3e url('FOURTH_IMAGE_URL') no-repeat;
background-size: 100% 180px;
}
</style>
<div class="befeature">
<div class="bebox" id="bebox1">
<div class="beupbox"><h2><a href='#' target='_blank'>This is demo heading 1<a/></h2></div>
<div class="bedownbox"><p>This is the first description.</p></div>
</div>
<div class="bebox" id="bebox2">
<div class="beupbox"><h2>
<a href='#' target='_blank'>This is demo heading 2</h2></a></div>
<div class="bedownbox"><p>This is the second description.</p></div>
</div>
<div class="bebox" id="bebox3">
<div class="beupbox"><h2>
<a href='#' target='_blank'>This is demo heading 3</h2></a></div>
<div class="bedownbox"><p>This is the third description.</p></div>
</div>
<div class="bebox" id="bebox4">
<div class="beupbox"><h2>
<a href='#' target='_blank'>This is demo heading 4</a></h2></div>
<div class="bedownbox"><p>This is the fourth description.</p></div>
</div>
</div>