Bootstrap Snippet img card using HTML CSS

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="case-study-gallery">
  <h1 class="title">CASE STUDIES</h1>
  <p>This is an example of a portfolio gallery. It has some simple hover transitions and is pretty rad.</p>
<div class="case-study study1">
    <figure>
        <img class="case-study__img" src="http://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
    </figure>
  <div class="case-study__overlay">
    <h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study2">
    <figure>
        <img class="case-study__img" src="http://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
    </figure>
  <div class="case-study__overlay">
    <h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study3">
    <figure>
        <img class="case-study__img" src="http://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
    </figure>
  <div class="case-study__overlay">
    <h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
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
* {
  box-sizing: border-box;
}
body {
  background-image: url("http://subtlepatterns.com/patterns/sativa.png");
}
.title {
  text-align: center;
  font-family: 'Oswald';
  font-weight: 100;
  font-size: 3.75rem;
  letter-spacing: 5px;
  background: linear-gradient(rgba(255, 0, 0, 0), #444, rgba(255, 0, 0, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0;
}
@media screen and (min-width: 37.5em) {
  .title {
    font-size: 4.75rem;
  }
}
p {
  margin: 0 auto 2rem;
  text-align: center;
  font-family: 'oswald';
  font-size: 1.25rem;
  color: #444;
  font-weight: 100;
  width: 90%;
}
@media screen and (min-width: 37.5em) {
  p {
    height: 70%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"img card"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"img card" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"img card"
Bootstrap 3.0.0 Snippet by evarevirus