HTML Card with CSS Hover effect

CSS Hover Card animation developed using css and javascript. Item description on hovering the card. Demo and download are available.

Demo Download

Author Sowmya Seshadri
Hits
Created SEPTEMBER 10, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<div class="container">
  <div class="overlay">
    <div class = "items"></div>
    <div class = "items head">
      <p>Flower Embroidery Hoop Art</p>
      <hr>
    </div>
    <div class = "items price">
      <p class="old">$699</p>
      <p class="new">$345</p>
    </div>
    <div class="items cart">
      <i class="fa fa-shopping-cart"></i>
      <span>ADD TO CART</span>
  </div>
</div>
</div>

CSS Code

$bg: #FEF5DF;

body {
  background-color: $bg;
}

.container {
  width: 300px;
  height: 400px;
  
  position: absolute;
  top:0; right: 0; left: 0; bottom: 0;
  margin: auto;
  
  background: url("https://i.pinimg.com/564x/6f/5a/b1/6f5ab1b470beeeeaf285bb451c63ac8f.jpg");
  background-color: black;
  background-size: cover;
  cursor: pointer;
  
  -webkit-box-shadow: 0 0 5px #000;
        box-shadow: 0 0 5px #000;
  }

.overlay {
  width: 100%;
  height: 100%;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 2fr 1fr;
  
  background: rgba(77, 77, 77, .9);
  color: $bg;
  opacity: 0;
  transition: all 0.5s;
  
  font-family: 'Playfair Display', serif;
}


.items {
  padding-left: 20px;
  letter-spacing: 3px;
}

.head {
  font-size: 30px;
  line-height: 40px;
  
  transform: translateY(40px);
  transition: all 0.7s;
  hr {
    display: block;
    width: 0;
    
    border: none;
    border-bottom: solid 2px $bg;
    
    position: absolute;
    bottom: 0; left:20px;
    
    transition: all .5s;
  }
}

.price {
  font-size: 22px;
  line-height: 10px;
  font-weight: bold;  
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s;
  .old {
    text-decoration: line-through;
    color: lighten(rgb(77, 77, 77),40%);
  }
}

.cart {
  font-size: 12px;
  opacity: 0;
  letter-spacing: 1px;
  font-family: 'Lato', sans-serif;
  transform: translateY(40px);
  transition: all 0.7s;
  i {
    font-size: 16px;
  }
  span {
    margin-left: 10px;
  }
}

.container:hover .overlay {
  opacity: 1;
  & .head {
    transform: translateY(0px);
  }
  
  & hr {
    width: 75px;
    transition-delay: 0.4s;
  }
  
  & .price {
    transform: translateY(0px);
    transition-delay: 0.3s;
    opacity: 1;
  }
  
  & .cart {
    transform: translateY(0px);
    transition-delay: 0.6s;
    opacity: 1;
  }
}

Preview

HTML Card with CSS Hover effect animation preview

Advertisement

Google Matched Content...