<div class="product">
<div class="product-hover"></div>
<img src="http://fillmurray.com/300/300"/>
<div class="product-info">
<div class="subhead">Sale</div>
<h2 class="product-name">Fleece</h2>
<p class="product-description">Beat the chill and get cozy.</p>
<div class="price">
<span class="from">from</span>
<span class="amount">
<span>$</span>9.90
</span>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);
body {
padding: 20px;
font-family: 'Ropa Sans', sans-serif;
}
.product {
width: 376px;
padding: 15px;
position: relative;
float: left;
margin: 0 20px 0 0;
> img {
display: block;
position: relative;
}
&:hover, &:active {
.product-hover {
opacity: 1;
}
}
}
.product-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.3s ease;
background-size: 30px 30px;
background-image: linear-gradient(
45deg,
rgba(black, 0.1) 25%,
transparent 25%,
transparent 50%,
rgba(black, 0.1) 50%,
rgba(black, 0.1) 75%,
transparent 75%,
transparent
);
animation: barberpole 0.5s linear infinite;
}
@keyframes barberpole {
from { background-position: 0 0; }
to { background-position: 60px 30px; }
}
.product-info {
position: absolute;
bottom: 30px;
right: 30px;
background: white;
width: 150px;
padding: 10px 10px 50px 10px;
}
.subhead {
color: #f00;
text-transform: uppercase;
font-weight: bold;
}
.product-name {
color: #990033;
text-transform: uppercase;
font-weight: bold;
margin: 0;
letter-spacing: -1px;
}
.price {
position: absolute;
bottom: 10px;
right: 10px;
}
.amount {
color: red;
font-size: 150%;
> span {
font-size: 75%;
}
}
h1 {
font-size: 72px;
margin: 2px 0 0 0;
}
View Compiled
let foo = "bar";
This Pen doesn't use any external CSS resources.