WSB v7 Product Image Hover Effect

In this example below you will see how to do a WSB v7 Product Image Hover Effect with some HTML / CSS and Javascript

This pen allows you to have a standalone image that links to the product (in QSC). Rather than putting a WSB v7 button over an image, this achieves the same effect in one element instead of 2.

Thumbnail
This awesome code was written by dannyd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dannyd ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>WSB v7 Product Image Hover Effect</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<!-- You don't need to actually add the HTML if you are doing this within WSB v7. The idea is to have a mobile friendly product image in v7 that links to the store. -->
<!-- Thanks to Barnes for helping with pointer-events:none to keep the link active. Thanks to Quinn for helping with the CSS transition and box-shadow effects.-->
<div class="img_product-image"><a href="#"><img src="http://placehold.it/300x300" alt="placeholder image"/></a></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dannyd/wsb-v7-product-image-hover-effect-QEyVKQ */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,600);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css);

.img_product-image {
  position: relative;
  overflow: hidden;
  /* You can remove everything below this line when adding to v7. The next 3 lines are strictly for having this display properly in this codepen*/
  width: 300px;
  height: 300px;
  margin: 60px auto;
}

.img_product-image::before {
  content: "View Details";
  font-family: 'Open Sans', sans-serif;
  display: block;
  color: white;
  font-size: 0px;
  text-align: center;
  width: 100%;
  height: 100%;
  padding-top: 100px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  top: 0;
  left: 0;
  position: absolute;
  background: transparent;
  z-index: 2;
  pointer-events: none;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  box-sizing: border-box;
}

.img_product-image:hover::before {
  font-size: 24px;
  background: #3f3336;
  background: transparent\9;
  background: rgba(63, 51, 54, .85);
  -webkit-box-shadow: inset 0px 0px 183px -9px rgba(50, 40, 48, 1);
  -moz-box-shadow: inset 0px 0px 183px -9px rgba(50, 40, 48, 1);
  box-shadow: inset 0px 0px 183px -9px rgba(50, 40, 48, 1);
}

.img_product-image::after {
  font-family: FontAwesome;
  content: "\f002";
  display: block;
  top: 0;
  left: 0;
  color: #bc9c63;
  font-size: 0px;
  position: absolute;
  padding-top: 145px;
  pointer-events: none;
  padding-left: 50%;
  z-index: 5;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.img_product-image:hover::after {
  font-size: 40px;
  padding-left: 45%;
}


/* Hides before and after on mobile since you can't get hover effects on mobile anyway */

.mobilepod .img_product-image::before,
.mobilepod .img_product-image::after {
  display: none;
}

Comments