How to create a CSS3 featured Post Widget and how to add this in Blogger

Now stepping up day by day and now I am giving my first tutorial on how to create blah blah.Now after a long gap this is one of the featured widget I am launching as a widget.Before I had released 2 featured post widgets already.

Check the previous ones

`HTML`

<div class="be-feature-v6">

<div class="be-feature-box">
<img src=
"https://lh5.googleusercontent.com/-Zy-5WAKBHOs/USo3qiVSarI/AAAAAAAAAqM/wEr7YfAPV_Q/s512-no/Android-Metro.PNG" />
<span>This is a box <a href="#">test link</a></span>
</div>

<div class="be-feature-box">
<img src=
"https://lh4.googleusercontent.com/-BFXygQjb0i4/USo3ruhbZ-I/AAAAAAAAAq0/7Ds-shjJTwY/s512-no/Antivirus-Software-Metro.PNG" />
<span>This is a box <a href="#">test link</a></span>
</div>

<div class="be-feature-box">
<img src=
"https://lh6.googleusercontent.com/-xtxSigWGZv8/USo3seT0-0I/AAAAAAAAArA/-ecIgLwmvYQ/s512-no/App-Store-Metro.PNG" />
<span>This is a box <a href="#">test link</a></span>
</div>

<div class="be-feature-box">
<img src=
"https://lh3.googleusercontent.com/-f41mKSgNasg/USo3sQDlV7I/AAAAAAAAAq8/g5pOWMK3T3A/s512-no/Apple-Metro.PNG" />
<span>This is a box <a href="#">test link</a></span>
</div>

</div>

if we consider HTML then you can see that div with class="be-feature-v6" is the outer.While each div with class="be-feature-box" is a box in it and there are four boxes in it.Every div with class="be-feature-box" has 2 child tags,first is img which is image and second is span which is the message appear on hover.

CSS

Now lets create the outer of the widget.

.be-feature-v6{width:100%; }

I've set the width to 100% so there is no problem of space.Now add the box .

.be-feature-box
{
box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
float: left;
height: 200px;
margin: 5px;
moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
overflow: hidden;
webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
width: 200px;
}

If we look at above snippet I have add float:left which make them lined in horizontal position (depends on the space) and I've set each box size is 200px by 200px or you can change and box shadow and margin to add a little customized.Now below you can see the image CSS.

.be-feature-box img
{
height: 200px;
position: absolute;
width: 200px;
}

I've make them height and width to 200px so the images fit in the box and I've set the position to absoulte so they can come in left-top and easy setting position because they have to go in back.Now its time for the message that is the important one.

.be-feature-box span
{
background: #e60066;
color: #fff;
display: block;
font-family: segoe UI light;
font-size: 30px;
height: 160px;
moz-transition: all .3s ease-in-out;
opacity: 0;
o-transition: all .3s ease-in-out;
padding: 20px;
position: absolute;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
width: 160px;
}

Now I've set width and height to 160px because I've put padding to 20px;below image shows it well.

How to create a CSS3 featured Post Widget

And I've set position to absolute so the span come on front and top-left position.Color,background is for customization and set opacity to 0 so it will not show.For CSS3 animation I've add some CSS3 transition effects.Now lets see when the box is on-hover.

.be-feature-box:hover>span
{
opacity: 1;
}

According to above CSS when the box is hover it will change opacity of span as it is the child tag of be-feature-box.Due to CSS3 transition effect the opacity will increase in an transition of 0.3s.Below CSS shows the link color and customization because links can get effected if you insert any link in it.

.be-feature-box a
{
color: #3e3e3e !important;
text-decoration: none;
}

Script

<style>
.be-feature-v6
{
width: 100%;
}
.be-feature-box
{
box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
float: left;
height: 200px;
margin: 5px;
moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
overflow: hidden;
webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
width: 200px;
}
.be-feature-box img
{
height: 200px;
position: absolute;
width: 200px;
}
.be-feature-box span
{
background: #e60066;
color: #fff;
display: block;
font-family: segoe UI light;
font-size: 30px;
height: 160px;
moz-transition: all .3s ease-in-out;
opacity: 0;
o-transition: all .3s ease-in-out;
padding: 20px;
position: absolute;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
width: 160px;
}
.be-feature-box:hover>span
{
opacity: 1;
}
.be-feature-box a
{
color: #3e3e3e !important;
text-decoration: none;
}
</style>
<div class="be-feature-v6">
<div class="be-feature-box">
<img src="https://lh5.googleusercontent.com/-Zy-5WAKBHOs/USo3qiVSarI/AAAAAAAAAqM/wEr7YfAPV_Q/s512-no/Android-Metro.PNG"/>
<span>This is a box <a href="#">test link</a></span>
</div>

<div class="be-feature-box">
<img src="https://lh4.googleusercontent.com/-BFXygQjb0i4/USo3ruhbZ-I/AAAAAAAAAq0/7Ds-shjJTwY/s512-no/Antivirus-Software-Metro.PNG"/>
<span>This is a box <a href="#">test link</a></span>

</div>

<div class="be-feature-box">
<img src="https://lh6.googleusercontent.com/-xtxSigWGZv8/USo3seT0-0I/AAAAAAAAArA/-ecIgLwmvYQ/s512-no/App-Store-Metro.PNG"/>
<span>This is a box <a href="#">test link</a></span>

</div>
<div class="be-feature-box">
<img src="https://lh3.googleusercontent.com/-f41mKSgNasg/USo3sQDlV7I/AAAAAAAAAq8/g5pOWMK3T3A/s512-no/Apple-Metro.PNG"/>
<span>This is a box <a href="#">test link</a></span>

</div>

</div>