JSFiddle - React, Tailwind, and code Playground

Add to Cart Hover Overlays

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="Related_product_list clearfix">

  <div class="Related_item">
    <div class="releted_product_overlay">
      <div class="related_product_img">
        <img src="http://i.imgur.com/dPG6S6o.jpg" alt="NAME" class="img-responsive">
      </div>
      <div class="related_titile">
        <a href="#">Product NAME: xxx (Pack of 5)</a>
        <p>$ 29.26</p>
      </div>
      <div class="overlay_img">
        <a href="#">view now</a>
      </div>
    </div>
    <a class="btn btn-xs btn-default cart_btn" href="#" name="add" id="prodid11we1">ADD TO CART</a>
</div>


  <div class="Related_item">
    <div class="releted_product_overlay">
      <div class="related_product_img">
        <img src="http://i.imgur.com/y6Ka4Nz.jpg" alt="Slam Stick C" class="img-responsive">
      </div>
      <div class="related_titile">
        <a href="#">Slam Stick C</a>
        <p>$ 875.00</p>
      </div>
      <div class="overlay_img">
        <a href="#">view now</a>
      </div>
    </div>
    <a class="btn btn-xs btn-default cart_btn" href="#" name="add" id="prodid11we1">ADD TO CART</a>

  </div>


  <div class="Related_item">
    <div class="releted_product_overlay">
      <div class="related_product_img">
        <img src="http://i.imgur.com/gAn5IiK.jpg" alt="NAME" class="img-responsive">
      </div>
      <div class="related_titile">
        <a href="#">Slam Stick X - Metal</a>
        <p>$ 1,600.00</p>
      </div>
      <div class="overlay_img">
        <a href="#">view now</a>
      </div>
    </div>
    <a class="btn btn-xs btn-default cart_btn" href="#" name="add" id="prodid11we1">ADD TO CART</a>

  </div>


  <div class="Related_item">
    <div class="releted_product_overlay">
      <div class="related_product_img">
        <img src="http://placehold.it/222x218/6547dd/ffffff/&text=PRODUCT G" alt="NAME" class="img-responsive">
      </div>
      <div...

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400|Domine:400|Montserrat:700);
*{
	outline:none;
}
a{
	text-decoration:none;
	cursor:pointer;
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

body {
  font-family: Montserrat, Arial, sans-serif;
  color: #222222;
}

a:link{text-decoration:none}

.Related_product_list .Related_item {
  float: left;
  overflow: hidden;
  margin: 20px 40px 0;
  width: 212px;
  text-align: center;
}

.Related_product_list .Related_item m img {
  display: block;
  max-width: 100%;
}

.Related_product_list .Related_item .product_overlay {
  color: #fff;
}

.releted_product_overlay {
  position: relative;
}

.Related_product_list .Related_item:hover .overlay_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(230, 230, 230, 0.7);
}

.Related_product_list .Related_item .overlay_img a {
  z-index: 1000;
  font-size: 24px;
  opacity: 0;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  color: #494949;
  font-family: 'Montserrat';
  -webkit-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  text-transform: capitalize;
}

.Related_product_list .Related_item:hover .overlay_img a {
  bottom: 44%;
  opacity: 1;
}

.Related_product_list .Related_item:hover .overlay_img a:hover{ color:red}

.related_product_img {
  display: table-cell;
  vertical-align: bottom;
  max-width: 212px;
  height: auto;
  text-align: center;
  position: relative;
}

.related_product_img img {
  max-width: 100%;
}

.related_titile {
  padding: 20px 11px 5px;
  height: 68px;
}

.related_titile a {
  display: block;
  color: #000;
  font-size: 16px;
  font-family: 'Montserrat';
  text-align: center;
  margin-bottom: 8px;
  line-height:14px
}

.related_titile p {
  font-size:...