CodePen

HTML

            
              <div class="product">
  <img src="http://f.cl.ly/items/3k3d1g3K34470d2v2K3O/50d942d85384a.jpeg"/>
  <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>

<h1>Hover Animation<br>from UNIQLO</h1>

<p>Like on pages <a target="_blank" href="http://www.uniqlo.com/us/mens-clothing">like this</a>.</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Ropa+Sans);

body {
  padding: 20px;
  font-family: 'Ropa Sans', sans-serif;
}

.product {
  animation: barberpole 0.5s linear infinite;
  transition: background-color 1s ease;
  
  background-color: #FFF;
  background-size: 30px 30px;
  background-image: linear-gradient(
    45deg, 
    #FFF              25%, 
    transparent       25%, 
    transparent       50%, 
    #FFF              50%, 
    #FFF              75%, 
    transparent       75%, 
    transparent
  );
  
  width: 376px;
  padding: 15px;
  position: relative;
  float: left;
  margin: 0 20px 0 0;
  > img {
    display: block;
    position: relative;
  }
  &:hover, &:active {
    background-color: rgba(0,0,0,0.1);
  }
  
}
.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%; 
  }
}

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 60px 30px; }
}

h1 {
  font-size: 72px;
  margin: 2px 0 0 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................