Bootstrap Snippet HOVER CARD using HTML CSS Bootstrap

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="services">
<div class="col-md-4">
    <figure class="snip1174 navy col-md-4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" />
      <figcaption>
        <h2>Տեսականի</h2>
        <p>
          Մեր տեասկանին սպասում է Ձեզ
        </p>
        <a href="/main/page/production">Ավելին</a>
      </figcaption>
    </figure>
</div>
<div class="col-md-4">
    <figure class="snip1174 red col-md-4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" />
      <figcaption>
        <h2>Ակցիաներ</h2>
        <p>
          Թարմացվող ակցիաներ մեր հաճախորդների համար
        </p>
        <a href="/main/page/auction">Ավելին</a>
      </figcaption>
    </figure>
</div>
<div class="col-md-4">
    <figure class="snip1174 navy col-md-4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" />
      <figcaption>
        <h2>Մեր մասին</h2>
        <p>
          Մեր ընկերության մաին ծանոթացեք այստեղ
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
/* Included color classes.. 
    .red 
    .blue 
    .yellow
    .green
    .navy
*/ 
.services{
    margin: 20px auto;
    }
figure.snip1174 {
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #ffffff;
  text-align: left;
  margin: 10px;
  width: 100%;
  border-radius: 0px;
}
figure.snip1174 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1174 img {
  max-width: 100%;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  vertical-align: top;
  opacity: 0.7;
}
figure.snip1174 figcaption {
  position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"HOVER CARD"
Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"HOVER CARD" Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"HOVER CARD"
Bootstrap 3.3.0 Snippet by Harut