@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;
}