CodePen

HTML

            
               <div id="product-wrap" class="grid">  
  <div class="switcher">
    <a href="#" class="list" title="Touch list"><i class="fa fa-list"> Touch</i></a>
    <a href="#" class="grid" title="Hover Grid"><i class="fa fa-th-large"> Hover</i></i></a>
  </div>
  
  <div class="prod_hold">
    <a class="wrap_link" href="#0">
      <span class="image">
        <img src="http://deltacycle.com/image/cache/data/RS1010-180x180.jpg" alt="Portable Quickstand" />
      </span>
    </a>
    <span class="price">
      $29.99
    </span>  
    <div class="info">
      <h3>
        Portable Quickstand
      </h3>
      <button>
        Add to Cart
      </button>
    </div>
  </div>
  
  <div class="prod_hold">
    <a class="wrap_link" href="#0">
      <span class="image">
        <img src="http://deltacycle.com/image/cache/data/rs4007c-2013redhook-180x180.jpg" alt="" />
      </span>
    </a>
    <span class="price">
      $19.99
    </span>  
    <div class="info">
      <h3>
        Bike Storage Hook & Tray
      </h3>
      <button>
        Add to Cart
      </button>
    </div>
  </div>
  
 </div>
            
          
!

CSS

            
              * { box-sizing: border-box; }
body {
  padding: 40px;
}

.switcher {
  margin-bottom: 3em;
  a {
    background: #666;
    text-decoration: none;
    color: #fff;
    padding: 20px;
    margin-right: 10px;
  }
}

.list {
  .prod_hold {
    min-height: 200px;
    width: 400px;
    border: 1px solid black;
    margin-bottom: 1em;
    padding: 1em;
      img {
        float: left
      }
  }
  .wrap_link {    
    display: block;
  }
  .price {
    display: block;
    margin-top: 1em;
  }
}

.grid {
  .prod_hold {
    position: relative;
    width: 182px;
    border: 1px solid #ccc;
    float: left;
    margin: 0 20px 20px 0;
    .price {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      background: red;
      color: white;
      padding: 5px;
    }
    .image {
      position: relative;
      z-index: 1;
    }
    .info {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      max-height: 0;
      padding: 0 10px 20px 10px;
      overflow: hidden;
      background: black;
      color: white;
      @include transition(0.2s);
      h3 {
        border-bottom: 1px solid #666;
        padding: 0 0 5px 0;
      }
    }
    &:hover, &:focus, &:active {
      .info {
        right: -10px;
        top: -10px;
        left: -10px;
        padding-top: 180px;
        max-height: 350px;
      }
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).on('click', 'div.switcher a', function(e) {
	var wrapClass = $(this).attr('class');
	$('#product-wrap').removeClass().addClass(wrapClass);
	e.preventDefault();
});

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