Bootstrap Snippet card effect 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='container'>
  <div class='widget'>
    <div class='cycle-slideshow' data-cycle-allow-wrap='true' data-cycle-fx='carousel' data-cycle-next='#next' data-cycle-pager-template="<a href='#' class='thumb'><img src='{{children.0.src}}'></a>" data-cycle-pager='#thumbnails' data-cycle-prev='#prev' data-cycle-slides='figure' data-cycle-timeout='0'>
      <figure>
        <img alt='A Taste of the Kitchen' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/first-course.jpg'>
        <figcaption>
          <h3>A Taste of the Kitchen</h3>
          <span class='tag'>Served Family Style</span>
          <p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio.</p>
          <div class='rating'>
            <span class='fa fa-star'></span>
            <span class='fa fa-star'></span>
            <span class='fa fa-star'></span>
            <span class='fa fa-star'></span>
            <span class='fa fa-star'></span>
          </div>
        </figcaption>
      </figure>
      <figure>
        <img alt='Rustic Reds' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/second-course.jpg'>
        <figcaption>
          <h3>Rustic Reds</h3>
          <span class='tag'>From the land of Italy</span>
          <p>Totam at eius excepturi deleniti sed, error repellat itaque omnis maiores tempora ratione dolor velit minus porro aspernatur repudiandae.</p>
          <div class='rating'>
            <span class='fa fa-star'></span>
            <span class='fa fa-star'></span>
            <span class='fa fa-star'></span>
            <span class='fa fa-star-o'></span>
            <span class='fa fa-star-o'></span>
          </div>
        </figcaption>
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
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  min-height: 100%;
}
body {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/wine-bg.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Open Sans", serif;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.container {
  margin: 2em auto;
  width: 90%;
  max-width: 1100px;
}
@media only screen and (min-width: 815px) {
  .container {
    margin: 7em auto;
  }
}
.widget {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card effect"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card effect" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card effect"
Bootstrap 3.0.0 Snippet by evarevirus