Bootstrap Snippet Boxes With Icon Hover Using HTML CSS Bootstrap

Toggle navigation Bootsnipp

• Bootstrap For
  • CSS Frameworks
  • Bootstrap
  • Foundation
  • Semantic UI
  • Materialize
  • Pure
  • Bulma
  • References
  • CSS Reference

• Tools
  • Community
  • Page Builder
  • Form Builder
  • Button Builder
  • Icon Search
  • Dan's Tools
  • Diff / Merge
  • Color Picker
  • Keyword Tool
  • Web Fonts
  • .htaccess Generator
  • Favicon Generator
  • Site Speed Test
• Snippets
  • Featured
  • Tags
  • By Bootstrap Version
  • 4.1.1
  • 4.0.0
  • 3.3.0
  • 3.2.0
  • 3.1.0
  • 3.0.3
  • 3.0.1
  • 3.0.0
  • 2.3.2
• Register
• Login

"Boxes with icon hover" Bootstrap 3.1.0 Snippet by gutomoraes

3.1.0 hover Preview HTML CSS

• View Full Screen

Fork

• Fork this

156.3K   353 Fav

Post to Facebook Tweet this

<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; }

Questions / Comments:

PostPosting GuidelinesFormatting

- Now

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

Gordon () - 10 years ago - Reply 0

- Now

Could you upload a screenshot?

maxsurguy () - 10 years ago - Reply 0

- Now

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 () - 11 years ago - Reply 0

- Now

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 () - 11 years ago - Reply 0

- Now

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 () - 11 years ago - Reply 0

- Now

Super Job

John () - 11 years ago - Reply 0

- Now

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 () - 11 years ago - Reply 0

- Now

http://bootsnipp.com/snippe...

Erik () - 11 years ago - Reply 0

- Now

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

NM () - 11 years ago - Reply 0

- Now

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 () - 11 years ago - Reply 0

- Now

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

Ken Verhaegen () - 11 years ago - Reply 0

- Now

nice one. thanks sharing!

Ameenullah () - 11 years ago - Reply 0

- Now

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

mouse0270 () - 11 years ago - Reply 0

- Now

×Close Donate BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76 Close