<div class="product-card">
  <div class="product-card__cover" style="background-image: url(https://mattneilblog.files.wordpress.com/2017/01/rogueone_cover.jpeg)">
  </div>
  <div class="product-card-content">
  <h2 class="product-card-content__title">Rogue one: A Star Wars Movie (Blu-ray)</h2>
    <p><span class="price">£14.99</span> <span class="price-saving">Save: £8.00</span>
      <span class="delivery-msg">FREE UK Delivery available</span></p>
  </div>
  <a href="#" class="btn">Pre-order Now</a>
  <label for="cbDesc" class="lbl-view-details">
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 26 26" class="cross">
<path d="M25.763 20.888c-0-0-0-0-0-0l-7.887-7.888 7.887-7.888c0-0 0-0 0-0 0.085-0.085 0.146-0.184 0.186-0.29 0.108-0.289 0.046-0.627-0.186-0.859l-3.726-3.726c-0.232-0.232-0.57-0.294-0.859-0.186-0.106 0.039-0.205 0.101-0.29 0.186 0 0-0 0-0 0l-7.888 7.888-7.888-7.888c-0-0-0-0-0-0-0.085-0.085-0.184-0.146-0.29-0.186-0.289-0.108-0.627-0.046-0.859 0.186l-3.726 3.726c-0.232 0.232-0.294 0.57-0.186 0.859 0.039 0.106 0.101 0.205 0.186 0.29 0 0 0 0 0 0l7.888 7.888-7.888 7.888c-0 0-0 0-0 0-0.085 0.085-0.146 0.184-0.186 0.29-0.108 0.289-0.046 0.627 0.186 0.859l3.726 3.726c0.232 0.232 0.57 0.294 0.859 0.186 0.106-0.039 0.205-0.101 0.29-0.186 0-0 0-0 0-0l7.888-7.888 7.888 7.888c0 0 0 0 0 0 0.085 0.085 0.184 0.146 0.29 0.186 0.289 0.108 0.627 0.046 0.859-0.186l3.726-3.726c0.232-0.232 0.294-0.57 0.186-0.859-0.039-0.106-0.101-0.205-0.186-0.29z"></path>
</svg>
  </label>
  <input type="checkbox" id="cbDesc" class="cb-view-details" />
  <div class="product-card-description">    
    <h3>Description</h3>
  <p>From Lucasfilm comes the first of the Star Wars standalone films, “Rogue One: A Star Wars Story,” an all-new epic adventure. In a time of conflict, a group of unlikely heroes band together on a mission to steal the plans to the Death Star, the Empire’s ultimate weapon of destruction. This key event in the Star Wars timeline brings together ordinary people who choose to do extraordinary things, and in doing so, become part of something greater than themselves.</p>
    <span aria-hidden="true" class="arrow-left"></span>
  </div>
</div>
$white: #fff;
$grey: #e1e3e4;
$blue: #2196f3;
$turquoise: #42ab9e;
$text: #444;
$cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

body {
  background: $grey;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
}

p {
  margin: 30px 0;
  font-size: 20px;
  font-weight: 300;
  font-size: 18px;
}

.product-card {
  background: $white;
  box-sizing: border-box;
  padding: 20px;
  width: 420px;
  margin: 40px auto;
  position: relative;
  
  &__cover {
    height: 200px;
    background-position: 90% -30px;
    background-repeat: no-repeat;
  }
}

.product-card-content {
  color: $text;
  padding: 0 10px;
  
  &__title {
    margin: 20px 0;
    font-size: 28px;
    font-weight: 400;
  }
}

.product-card-description {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  color: $white;
  background: $turquoise;
  background: linear-gradient(-45deg, darken($turquoise, 10%) 0%, $turquoise 100%);
  padding: 20px;
  transform: translateX(0);
  z-index: -1;
  opacity: 0;
  transition: transform 0.5s $cubic-in-out, opacity 0.5s $cubic-in-out;
  
  > p {
    margin: 0;
  }
  
  .cb-view-details:checked ~ & {
    transform: translateX(100%);
    opacity: 1;
  }
}

.lbl-view-details {
  box-shadow: 0 2px 10px $text;
  background: $blue;
  border-radius: 100%;
  cursor: pointer;
  width: 52px;
  height: 52px;
  display: block;
  position: absolute;
  top: -20px;
  right: -20px;  
  transform: translateY(0);
  transition: transform 0.25s $cubic-in-out, box-shadow 0.25s $cubic-in-out;
  z-index: 1;
  
  &:hover {
    box-shadow: 0 4px 14px $text;
    transform: translateY(-5px);
  }
}

.cb-view-details {
  display: none;
}

.price {
  color: $blue;
  font-weight: 400;
  font-size: 26px;
}

.price-saving {
  font-size: 16px;
  font-weight: 300;
}

.delivery-msg {
  display: block;
  font-size: 16px;
  font-weight: 300;
}

.cross {
  fill: $white;
  transform: rotate(45deg);
  margin: auto;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}

.arrow-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;  
  border-left: 10px solid $white; 
}

.btn {
  box-sizing: border-box;
  background: $turquoise;
  color: $white;
  display: block;
  font-size: 20px;
  padding: 20px;
  min-height: 52px;
  margin-top: 60px;
  text-decoration: none;
  text-align: center;
  transition: background 0.25s $cubic-in-out;
  
  &:hover {
    background: darken($turquoise, 10%);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.