"Box of Featured"
Bootstrap 3.1.0 Snippet by roxguel

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO
Carousel Featured News Boostrap 4

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

I used it for my company website, web development.

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