"Projects list with view on hover "
Bootstrap 3.0.0 Snippet by manuelruiz

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
<h1 class="text-center text-primary title">Learn about our projects</h1>
<hr class="divider-title">
<div class="col-ms-10 col-md-4">
<div class="project">
<figure class="img-responsive">
<img src="http://lorempixel.com/400/300/sports/6/">
<figcaption>
<span class="project-details">Full project name</span>
<span class="project-price"><strong>$100</strong></span>
<span class="project-creator">creator name</span>
</figcaption>
<span class="actions">
<button class="btn btn-warning bnt-action" type="submit" >View </button>
</span>
</figure>
</div>
</div>
<div class="col-ms-10 col-md-4">
<div class="project">
<figure class="img-responsive">
<img src="http://lorempixel.com/400/300/city/2/">
<figcaption>
<span class="project-details">Full project name</span>
<span class="project-price"><strong>$100</strong></span>
<span class="project-creator">creator name</span>
</figcaption>
<span class="actions">
<button class="btn btn-warning bnt-action" type="submit" >View </button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body{
background:#eee;;
}
.title{
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4) !important;
}
.divider-title{
border:1px solid #dddddd;
}
.project {
margin-bottom: 30px;
vertical-align: top;
margin-right: 30px;
float: left;
cursor: pointer;
width:100%;
}
.project figure {
position: relative;
display: inline-block;
width: 283px;
-moz-box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0;
-webkit-box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0;
box-shadow: 0 3px 0 #e2e2e2,transparent 0 0 0;
-webkit-box-shadow: 0 3px 0 #e2e2e2;
-moz-box-shadow: 0 3px 0 #e2e2e2;
box-shadow: 0 3px 0 #e2e2e2;
}
.project figure figcaption {
position: relative;
z-index: 10;
padding: 8px 18px 11px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard PRO
arrow key navigation thumbnail gallery modal view
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: