Sun Sep 18 2022

Image Caption Hover Animation

CSS2811 views

File Name: image-caption-hover-animation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Caption Hover Animation</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
        }

        body {  background-color: #292929; }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        aside {
            width: 350px;
            height: 350px;
            position: relative;
            overflow: hidden;
        }

        aside img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            filter: grayscale(50%);
            transition: 0.3s all linear;
        }

        aside:hover img {
            filter: grayscale(0%);
        }

        aside div.title {
            position: absolute;
            bottom: 100px;
            background-color: #fff;
            padding: 5px 20px;
            font-size: 18px;
            font-weight: 500;
            width: 280px;
            left: -100%;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
            transition: 0.3s all ease-in-out;
            transition-delay: 0.3s;
        }

        aside:hover div.title {
            left: 0;
            transition-delay: 0s;
        }

        aside div.subTitle {
            position: absolute;
            bottom: 40px;
            background-color: #fff;
            padding: 5px 20px;
            width: 250px;
            right: -100%;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
            transition: 0.3s all ease-in-out;
            transition-delay: 0s;
        }

        aside:hover div.subTitle {
            right: 0;
            transition-delay: 0.3s;
        }
    </style>
</head>
<body>
    <section>
        <aside>
            <img src="https://cdn.pixabay.com/photo/2016/11/14/04/54/woman-1822646_960_720.jpg" alt="" />
            <div class="title">Lorem ipsum dolor sit amet</div>
            <div class="subTitle">Eaque voluptas atque nostrum alias aut?</div>
        </aside>
    </section>
</body>
</html>

Result Screenshot(s)

Image Caption Hover AnimationWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.