Animate the top image with CSS to shrink and reveal the sub image underneath

Question

Animate the top image with CSS to shrink and reveal the sub image underneath

I currently have a set up with two images stacked on top of each other. I am looking to make the top image shrink after a timeout, not disappear completely but become a thumbnail size. As this top image shrinks, the bottom image will be revealed.

As someone with no experience in CSS animation, what would be the best approach for me to learn how to achieve the above effect?

<div class="block">
    <div class="block__content">
        <h3 class="title--s">
            This is the title
        </h3>
    </div>
    <div class="block__image product-sale">
        <img src="/topimage" alt="topimage">
    </div>
</div>

The product-sale class contains the styling for the thumbnail:

.product-sale {
                &:before {
                content: "text";
                height: 53px;
                padding: 10px;
                background: red;
                color: #fff;
                font-weight: bolder;
                position: absolute;
                z-index: 999;
                display: flex;
                align-items: center;
                justify-content: center;
                left: 30px;
                font-size: 11px;
                }
            }

This is the code for the .block__image class:

.block__image {
            min-width: 140px;
            position: relative;

            img {
                width: 400px;
                height: 200px;
                -o-object-fit: cover;
                object-fit: cover;
                padding: 0px 30px 30px 30px;

            }
}

One idea I have is to add a transition to the pseudo element. You can see an example of transitions on W3Schools.

css animation css-animations

Answer 1

Answer №1

If you want to add animation to an image using CSS, you can utilize @keyframes and the animation property. While the mention of a thumbnail was unclear, here is some code that demonstrates how you can implement animation:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .sub img {
                width: 300px;
                position: absolute;
                animation-name: shrink;
                animation-duration: 4s;
                animation-delay: 5s;
            }
            .top img {
                width: 300px;
                position: absolute;
            }
            @keyframes shrink {
                from {width: 300px;}
                to {width: 50px;}
            }
        </style>
    </head>
    <body>
        <div class="block">
            <div class="block__content">
                <h3 class="title--s">
                this is the title
                </h3>
            </div>
            <div class="top">
                <img src="/mm.jpg" alt="topimage">
            </div>
            <div class="sub">
                <img src="/m.png" alt="subimage">
            </div>
        </div>
    </body>
</html>

Feel free to use this as a reference for adding animations to your images!

Answer 2

If you want to add animation to an image using CSS, you can utilize @keyframes and the animation property. While the mention of a thumbnail was unclear, here is some code that demonstrates how you can implement animation:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .sub img {
                width: 300px;
                position: absolute;
                animation-name: shrink;
                animation-duration: 4s;
                animation-delay: 5s;
            }
            .top img {
                width: 300px;
                position: absolute;
            }
            @keyframes shrink {
                from {width: 300px;}
                to {width: 50px;}
            }
        </style>
    </head>
    <body>
        <div class="block">
            <div class="block__content">
                <h3 class="title--s">
                this is the title
                </h3>
            </div>
            <div class="top">
                <img src="/mm.jpg" alt="topimage">
            </div>
            <div class="sub">
                <img src="/m.png" alt="subimage">
            </div>
        </div>
    </body>
</html>

Feel free to use this as a reference for adding animations to your images!

Animate the top image with CSS to shrink and reveal the sub image underneath

Answer №1

Similar questions

Displaying images in a horizontal row instead of a vertical column when using ng-repeat

Capture any clicks that fall outside of the specified set

Highcharts 3D Pie Chart with Drilldown Feature

In Google Chrome, the :after element on the left is cleared, while other browsers do not

What's the best way to make two buttons appear side by side on a webpage?

Display one div and conceal all others

Broken image path in the Model-View-Controller framework

Guide on incorporating a glyphicon into a dropdown menu link by leveraging the link_to helper in Ruby on Rails

Personalize the width of the columns

The table is too wide for its parent mat-nav-list, stretching to 100%

The Layout of Bootstrap4 Form is Displaying Incorrectly

Selenium was unable to find the p tag element on the webpage

Issues with incorrect sizing in Safari when using rem units alongside animations

Having trouble with animating the background color of an input button using jQuery?

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

CrossBrowser - Obtain CSS color information

What is the best way to incorporate a background image that complements my content?

Position to the left with Flexbox

What exceeds the size of the HTML tag?

Ways to postpone CSS and Script loading once JavaScript has been executed