lg product

by Ben Clayton

HTML

<div class="product one">
  <div class="product-price">
    £1.50
  </div>
  <div class="product-picture-wrapper" style="background-image:url('//staging-lookinglass.holograph.digital/dyn/lg-vendex/images/products/orange-crisps.png')">
  </div>
  <div class="product-title">
    Bottle of Lime
  </div>
</div>


<div class="product two">
  <div class="product-price">
    £2.30
  </div>
  
  <div class="product-picture-wrapper" style="background-image:url('//staging-lookinglass.holograph.digital/dyn/lg-vendex/images/products/highland-spring-tall.png')">
  </div>
  
  <div class="product-title">
    Large Bottle of sparkling Lemonade
  </div>
</div>

CSS

body {
  background: #FFFFFF;
  padding: 20px;
  font-family: Helvetica;
}

.product {
  position: relative;
  display: inline-block;
  width: 33%;
  height: 300px;
  margin: 5px;
  /* border: gray 1px solid; */
  vertical-align: top;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.product:hover {
  transform: scale(1.03);
}

.product-price {
  position: absolute;
  top: 20px;
  width: 50px;
  padding: 4px;
  border-radius: 4px;
  background-color: rgba(80, 10, 90, 0.7);
  color: white;
  text-align: center;
}

.product-picture-wrapper {
  width: 90%;
  margin: 0 auto 0 auto;
  /* border: 1px dotted gray; */
  height: 82%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}



.product-title {
  margin-top:10px;
  width: 100%;
  text-align: center;
  padding:3px;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})