levinmejia

ul.feature li > * {
  pointer-events: none;
  -webkit-transform: scale(.5);
  -webkit-transform-origin: 0 0;
  transform: scale(.5);
  transform-origin: 0 0;
  transition: .4s cubic-bezier(.3,0,0,1.2);
}

levinmejia

p {
  padding: 0 16px 15px 
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  background: rgba(255,255,255,.97);
}

levinmejia

-webkit-transform: scale(.5);
transform: scale(.5);

levinmejia

<ul class="feature">
  <li>
    <img src="//cdn.shopify.com/s/files/1/1008/6622/products/1_large.jpg?v=1443667905" alt="Buckle" />
    <p><strong>Buckle</strong></p>
  </li>
  <li>
    <img src="//cdn.shopify.com/s/files/1/1008/6622/products/2_large.png?v=1443667927" alt="Strap" />
    <p><strong>Leather Strap</strong></p>
  </li>
  <li>

levinmejia

<script src="http://uilang.com/lib/production/uilang.js"></script>

levinmejia

<code> 
  clicking on "ul.feature li, ul.feature li img" removes class "open" on "ul.feature li" 
  clicking on "ul.feature li" adds class "open" on "target" 
</code>