<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 ---------->
<figure class="snip1224">
<h4>Casual Top</h4>
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample17.jpg" alt="sq-sample17"/></div>
<div class="rating"><i class="ion-ios-star"></i><i class="ion-ios-star"></i><i class="ion-ios-star"></i><i class="ion-ios-star"></i><i class="ion-ios-star-outline"></i></div>
<figcaption>
<p>I'm just very selective about the reality I choose to accept.</p>
<div class="price">
<s>$24.00</s>$19.00
</div>
</figcaption>
<a href="#" class="add-to-cart">Add to Cart</a>
</figure>
<figure class="snip1224 hover">
<h4>Footwear</h4>
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample15.jpg" alt="sq-sample15"/></div>
<div class="rating"><i class="ion-ios-star"></i><i class="ion-ios-star"></i><i class="ion-ios-star"></i><i class="ion-ios-star"></i><i class="ion-ios-star-outline"></i></div>
<figcaption>
<p>I suppose if we couldn't laugh at things that don't make sense, we couldn't react to a lot of life.</p>
<div class="price">
<s>$29.00</s>$24.00
</div>
</figcaption>
<a href="#" class="add-to-cart">Add to Cart</a>
</figure>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,600);
figure.snip1224 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 400px;
max-width: 480px;
width: 100%;
background: #1a1a1a;
color: #ffffff;
text-align: center;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1224 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.snip1224 .image {
background-color: #000000;
width: 50%;
overflow: hidden;
float: right;
}
figure.snip1224 img {
max-width: 100%;
vertical-align: top;
}
figure.snip1224 figcaption {
position: absolute;
width: 50%;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
bottom: 0;
padding: 10px 35px;
}
figure.snip1224 h4,
figure.snip1224 p,
figure.snip1224 .price {
margin: 0 0 8px;
}
figure.snip1224 h4 {
position: absolute;
width: 50%;
top: 10px;
right: 0;
text-transform: uppercase;
font-weight: 400;
color: #ffffff;
letter-spacing: 1px;
z-index: 1;
}
figure.snip1224 p {
font-size: 0.7em;
font-weight: 500;
line-height: 1.6em;
}
figure.snip1224 .rating {
position: absolute;
width: 50%;
line-height: 44px;
color: #ffffff;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
figure.snip1224 .price {
color: #ffffff;
font-size: 1.3em;
opacity: 0.8;
}
figure.snip1224 .price s {
display: inline-block;
padding: 0 8px 0 0;
font-size: 0.85em;
color: #f39c12;
}
figure.snip1224 .add-to-cart {
text-decoration: none;
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
width: 50%;
background-color: rgba(0, 0, 0, 0.2);
line-height: 44px;
font-size: 0.75em;
text-transform: uppercase;
color: #ffffff;
}
figure.snip1224:hover img,
figure.snip1224.hover img {
opacity: 0.6;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1224:hover .add-to-cart,
figure.snip1224.hover .add-to-cart {
background-color: rgba(0, 0, 0, 0.5);
}
/* Demo purposes only */
body {
background-color: #212121;
}
