"Boxes with icon hover"
Bootstrap 3.1.0 Snippet by gutomoraes

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- Boxes de Acoes --> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-thumbs-o-up"></i></div> <div class="info"> <h3 class="title">Made with Bootstrap</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> <div class="more"> <a href="#" title="Title Link"> Read More <i class="fa fa-angle-double-right"></i> </a> </div> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-flag"></i></div> <div class="info"> <h3 class="title">Icons by Font Awesome</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> <div class="more"> <a href="#" title="Title Link"> Read More <i class="fa fa-angle-double-right"></i> </a> </div> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-desktop"></i></div> <div class="info"> <h3 class="title">Desktop Friendly</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> <div class="more"> <a href="#" title="Title Link"> Read More <i class="fa fa-angle-double-right"></i> </a> </div> </div> </div> <div class="space"></div> </div> </div> <!-- /Boxes de Acoes --> </div> </div>
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"; @import "http://fonts.googleapis.com/css?family=Roboto:400,500"; .box > .icon { text-align: center; position: relative; } .box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #63B76C; vertical-align: middle; } .box > .icon:hover > .image { background: #333; } .box > .icon > .image > i { font-size: 36px !important; color: #fff !important; } .box > .icon:hover > .image > i { color: white !important; } .box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; } .box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; } .box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; } .box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;} .box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; } .box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; } .box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C; } .box .space { height: 30px; }

Related: See More


Questions / Comments:

Just used it and looking great. But not working in IE9. Any ideas?

Gordon () - 9 years ago - Reply 0


Could you upload a screenshot?

maxsurguy () - 9 years ago - Reply 0


Works goow, however I can't get it to appear one next to the other. They are positioned one under the other. Any help please?

Magos () - 10 years ago - Reply 0


For some reason, I can't get this to work. I have just copied the codes and referenced the bootstraps stylesheets; is there something I'm missing?

Le Dynamique Professeur () - 10 years ago - Reply 0


If you are a registered user on Bootsnipp you can download the whole snippet by clicking on the little cog wheel by the "Fork this" button. That way you will get the exact code of the snippet and can debug what's missing in yours.

maxsurguy () - 10 years ago - Reply 0


Super Job

John () - 10 years ago - Reply 0


Is it possible someone could do a version using the default Glyphicons? I can't use Font Awesome at my office (closed network and can't transfer files). Thanks.

NM () - 10 years ago - Reply 0


Erik () - 10 years ago - Reply 0


Yes! been looking for this type of effect! Good job!

NM () - 10 years ago - Reply 0


Importing Roboto, but not using it... knowing the font too well! - Your font-family isn't set right. ('Robot' & Roboto instead of 'Roboto Slab')

Guest () - 10 years ago - Reply 0


Oh, and: font-family: 'Roboto Slab',Georgia,"Times New Roman",Times,serif;

Ken Verhaegen () - 10 years ago - Reply 0


nice one. thanks sharing!

Ameenullah () - 10 years ago - Reply 0


As soon as I saw this I started to try to think of a project I could use it in. It looks beautiful!

mouse0270 () - 10 years ago - Reply 0