CSS Hover Card animation developed using css and javascript. Item description on hovering the card. Demo and download are available.
Author Sowmya Seshadri
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
