product-item-presentation

index.html

<div class="product-item">
  <img src="" class="product-item-image" alt="" />
  <h2 class="product-item-title">  PL01 Men’s Pullover </h2>
  <div class="product-item-layer">
  <div class="product-item-excerpt">
    <p><strong>Produktkod:</strong> PW04</p>

<p>Modern passform<br>
Förstärkt nacksöm<br>
Snygga detaljer</p>

    <p><strong>Passar:</strong> Både på jobb och fritid.</p>
  </div>
    
    <a class="ghost-button" href="#">Visa artikel</a>
    <a  class="ghost-button" href="#">Lägg till som favorit</a>
    </div>
</div>

product-item-presentation.markdown

product-item-presentation

A Pen by erikpantzar on CodePen.

License.

script.js

$('.product-item').on('click', function() {
  $(this).toggleClass('active');
});

style.scss

@import "compass/css3";
p { margin: 0 0 15px; font-family: sans-serif; font-size: 1em; line-height: 1.5; }
strong { font-weight: 700; }

.product-item { width: 300px; height: 400px; background: white; border: 2px solid black; }

.product-item-image {
  background: red;
  width: 300px;
  height: 400px;
}

.product-item-excerpt {
  display: block;
}

.product-item {position: relative;}


.product-item.active .product-item-layer { display: block; }

.product-item-layer {
  display: none;
  background: white;
  position: absolute;
  background: green;
  padding: 20% 10%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.product-item-layer .ghost-button {
  margin: 0 auto 10px;  
  max-width: 200px;
}

.ghost-button {
  background: none; border: 1px solid;
  padding: 8px 12px;
  text-decoration: none;
  width: 100%;
  display: block;
  text-align: center;

}