CSS3 Featured Post Widget With Zoom Mask Effect!

css3 featured post widget
Many of you would have noticed the new featured articles section that we have introduced in our footer lately. It one of the amazing featured post widget that is waiting for you to be applied on your blogs. The power of CSS3 is really highlighted in this widget that shows up some amazing zoom/slide effects once you hover the mouse over it.

You can add as many featured articles in the widget as you wish. Its really easy to customize and you could play up with the CSS values to make it suite to your needs.

DEMO VIDEO!




Follow the instructions below to apply the widget to your blog.

Before we move on, you may like to view other amazing widgets that we recently published:



Step #1 Customize the widget code



<div align='center'>
<div id='background'>
<table>
  <tr><td>
  <div class='view view-first'>
                    <img src='First Post Image Link'/>
                    <div class='mask'>
                        <h2>First Post Heading</h2>
                      <p>

First Post Paragraph </p>
                        <a class='info' href='First Post Link'>Read More</a>
                    </div>
                </div>  </td>
 
 <td> <div class='view view-first'>
                    <img src='Second Post Image Link'/>
                    <div class='mask'>
                        <h2>Second Post Heading </h2>
                        <p>Second Post Paragraph</p>
                        <a class='info' href='Second Post Link'>Read More</a>
                    </div>
                </div>  
   </td> <td>
<div class='view view-first'>
                    <img src='Third Post Image Link'/>
                    <div class='mask'>
                        <h2>Third Post Heading </h2>
                        <p>Third Post Paragraph</p>
                        <a class='info' href='Third Post Link'>Read More</a>
                    </div>
      
    </div>  
  </td>
  </tr>
  <tr>
    <td>
      <div class='view view-first'>
                    <img src='Fourth Post Image Link'/>
                    <div class='mask'>
                        <h2>Fourth Post Heading  </h2>
                        <p>Fourth Post Paragraph</p>
                        <a class='info' href='Fourth Post Link'>Read More</a>
                    </div>
      
    </div>
      
      
    </td>
    <td>
      
      <div class='view view-first'>
                    <img src='Fifth Post Image Link'/>
                    <div class='mask'>
                        <h2>Fifth Post Heading  </h2>
                        <p>Fifth Post Paragraph</p>
                        <a class='info' href='Fifth Post Link'>Read More</a>
                    </div></div>
      
    </td>  
        
        <td>
          <div class='view view-first'>
                    <img src='Sixth Post Image Link '/>
                    <div class='mask'>
                        <h2>Sixth Post Heading  </h2>
                        <p>Sixth Post paragraph</p>
                        <a class='info' href='Sixth Post Link'>Read More</a>
                    </div>
          </div>
          
          <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right;padding-top:0px;"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></p>
          
          
        </td>
                  
    
  </tr>
  
  
</table>
</div>
</div>
<style>
  
#background {

background: #FAF8CC; width:100%; border: 1px solid #C9C299;
}
  
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
        .view {
   width: 300px;
   height: 200px;
   margin: 10px;
  
   border: 2px solid #000000;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 8px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 5px 40px ;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
  
</style>

Now simply edit the link above with your own featured post links. Every different post boxes codes are highlighted with different color so to distinguish them easily. Note that the paragraphs should not be longer than 75-80 characters.

Use our character count tool to count the characters in your paragraph that you wish to add in.
Once you have customized the widget as per your needs, its time to add the widget to your blog.

Step #2 Add the widget to your blog

Navigate to Blogger Dashboard >> Design >> Add a Gadget and paste the entire code with in it. OR you could add the widget directly into your blog template via going in Edit HTML option.

In case you wish to delete any section of the featured post widget, simply remove the following occurrences of section below:

<td>
      <div class='view view-first'>
                    <img src='Fourth Post Image Link'/>
                    <div class='mask'>
                        <h2>Fourth Post Heading  </h2>
                        <p>Fourth Post Paragraph</p>
                        <a class='info' href='Fourth Post Link'>Read More</a>
                    </div>
      
    </div>
      
      
    </td>

Need Any Help?


Hope you guys liked this amazing featured post widget. In case you face any problem while applying the widget, just drop out a comment below and we'll together try to fix that.smile

Stay safe guys!

You may like to read:

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: CSS3 Featured Post Widget With Zoom Mask Effect!
CSS3 Featured Post Widget With Zoom Mask Effect!
http://3.bp.blogspot.com/-Kt1Pw7k5r44/UChXIlsGBkI/AAAAAAAAFms/8uGxqHj33T4/s1600/featured+post+widget.png
http://3.bp.blogspot.com/-Kt1Pw7k5r44/UChXIlsGBkI/AAAAAAAAFms/8uGxqHj33T4/s72-c/featured+post+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/08/css3-featured-post-widget-with-zoom.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/08/css3-featured-post-widget-with-zoom.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade