"Box of Featured"
Bootstrap 3.1.0 Snippet by roxguel

<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 destacados"> <div class="col-md-4"> <div> <img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail"> <h2>Diseño Web</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#" class="btn btn-primary" title="Enlace">Leer más »</a> </div> </div> <div class="col-md-4"> <div> <img src="http://lorempixel.com/200/200/abstract/2/" alt="Texto Alternativo" class="img-circle img-thumbnail"> <h2>Desarrollo Web</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#" class="btn btn-primary" title="Enlace">Leer más »</a> </div> </div> <div class="col-md-4"> <div> <img src="http://lorempixel.com/200/200/abstract/3/" alt="Texto Alternativo" class="img-circle img-thumbnail"> <h2>Alojamiento Web</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#" class="btn btn-primary" title="Enlace">Leer más »</a> </div> </div> </div> </div>
.destacados{ padding: 20px 0; text-align: center; } .destacados > div > div{ padding: 10px; border: 1px solid transparent; border-radius: 4px; transition: 0.2s; } .destacados > div:hover > div{ margin-top: -10px; border: 1px solid rgb(200, 200, 200); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px; background: rgba(200, 200, 200, 0.1); transition: 0.5s; }

Related: See More


Questions / Comments:

can someone tell me what I do wrong? animations never work on my tests...

<div class="section text-center" id="forfaits">
<div class="container">
<div class="row destacados">
<div class="col-md-4">
<img src="img/bronze.png" class="img-responsive">
<h2>VFAX 100</h2>

Comprend un total de 100 pages entrantes et sortantes
à partir de 12.95$ / mois<sup> *</sup>


</div>
<div class="col-md-4">
<img src="img/argent.png" class="img-responsive">
<h2>VFAX 250</h2>

Comprend un total de 250 pages entrantes et sortantes
à partir de 19.95$ / mois<sup> *</sup>


</div>
<div class="col-md-4">
<img src="img/or.png" class="img-responsive">
<h2>VFAX 500</h2>

Comprend un total de 500 pages entrantes et sortantes
à partir de 24.95$ / mois<sup> *</sup>


</div>
</div>
</div>
</div>

Pierre Côté () - 9 years ago - Reply 0


LOVE IT !!!

Uli Worm () - 10 years ago - Reply 0


Hey. Great post! Can you somehow make the whole elevated thing clickable?

Christopher () - 10 years ago - Reply 0


It would be a nice upgrade.

Thank You.

Michel Varela Delevan () - 10 years ago - Reply 0


Thinking about adding another element to this. Going to try and add a few images for an image slider in the circle.

Dave () - 10 years ago - Reply 0


Cool!

maxsurguy () - 10 years ago - Reply 0


I wish I had a project that could use this, I really do. It looks and works amazingly.

mouse0270 () - 10 years ago - Reply 0


I used it for my company website, web development.

Michel Varela Delevan () - 10 years ago - Reply 0


It doesn't really fit with my website... I am sure I'll have a client website I can use it on soon enough. haha

mouse0270 () - 10 years ago - Reply 0