How to use CSS to pull down a small image to view a large image and information

Today I will talk about a CSS special effect of hovering a small picture to view a large picture and information, which is often used in Taobao, JD.com and other shopping malls. Let's take a look at the picture display first:

Please add a description of the image

If possible, you can also set shadows and delay effects. If you want to see it, you can look at the previous CSS special effects cases!

Please add a description of the image

The design idea is also very simple, which is to hide the large image below first, and then display the small image when you hover! Detailed comments are also included in the source code.

Attach the source code:

<!DOCTYPE html>
<html>

<head>
    <title>Drop-down image</title>
    <meta charset="utf-8">
    <style>
        body {
            text-align: center;
        }
        
        .dropdown {
            /* position is relative, the following child elements can be used as reference*/
            position: relative;
            /* Defined as an inline block-level element */
            display: inline-block;
        }
        
        .dropdown-content {
            /* Do not display this part of the content, including pictures*/
            display: none;
            /* Absolute positioning */
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        
        .dropdown:hover .dropdown-content {
            /* Display the large image when the mouse moves over it*/
            display: block;
        }
        /* Set the following comment text */
        
        .desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>Pull down the small image to see the large image</h2>
    <p>Move the mouse over the image to display the drop-down image and image information</p>

    <div class="dropdown">
        <img src="img/1.jpg" alt="cat" width="100" height="66" style="border-radius: 5px;">
        <div class="dropdown-content">
            <img src="img/1.jpg" alt="cat" width="400" height="260" style="border-radius: 10px;">
            <div class="desc">A cute little kitten! </div>
        </div>
    </div>


</body>

</html>

This is the end of this article about how to use CSS to pull down small images to view large images and information. For more relevant CSS content about pulling down small images to view large images, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: 10 Tips for Mobile App User Interface Design

>>: Detailed explanation of vuex persistence in practical application of vue