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

Vue3+Vite+TS implements secondary encapsulation of element-plus business components sfasga

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

Vue3+Vite+TS implements secondary encapsulation of element-plus business components sfasga

How to configure MySQL master-slave replication under Windows

Solution to the problem that the mysql8.0.11 client cannot log in

How to use MySQL group by and order by together

Detailed example of using CSS to beautify HTML form controls (form beautification)

How to change apt-get source in Ubuntu 18.04

Sample code for implementing a background gradient button using div+css3

CSS3 realizes the website product display effect diagram

MYSQL 5.6 Deployment and monitoring of slave replication

How React Hooks Work

Recommend

Detailed explanation of how to migrate a MySQL database to another machine

How to manually deploy war packages through tomcat9 on windows and linux

Why should the number of rows in a single MySQL table not exceed 5 million?

Solution for creating multiple databases when Docker starts PostgreSQL

MySQL deep paging (how to quickly paginate tens of millions of data)

10 Tips to Improve Website Usability

40 CSS/JS style and functional technical processing

MySQL slow query and query reconstruction method record

Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory

Analysis of permissions required to run docker

Detailed steps to install Sogou input method on Ubuntu 20.04

Summary of the difference between using from and join to query two tables in MySQL

Detailed graphic explanation of MySql5.7.18 character set configuration

MySQL 5.7.21 winx64 free installation version configuration method graphic tutorial

The latest collection of 18 green style web design works