CSS Image Card Overlay - Hover Slide Effect
Posted By :- "Harshal Khairnar" ON :- "2021-11-19 12:10:17"643 2 259 112
Image Overlay Slide
Learn how to create a sliding overlay effect to an image, on hover:
Below is code for effect, replace background image and try it
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.card{position: relative;/*overflow: hidden;*/width: 300px;height: 300px;border-radius: 5px;border: 2px solid rgb(108, 108, 108);}.card-img{background-image: url("img/logo.png");background-size: cover;width: 100%;height: 100%;}.card-img-overlay{position: absolute;overflow: hidden;display: flex;justify-content: center;align-items: center;width: 100%;height: 0;background-color: rgba(70, 70, 70, 0.24);bottom: 0;left: 0;right: 0;transition: .3s linear;}.card-title{font-size: 2rem;color: #a2a2a2;text-transform: capitalize;}.card:hover > .card-img-overlay{transition: .3s linear;height: 100%;}</style></head><body><!-- Card Holder --><div class="card"><div class="card-img"></div><div class="card-img-overlay"><h5 class="card-title">Card title</h5></div></div></body></html>
