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

Detailed explanation of Angular routing sub-routes

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

Detailed explanation of Angular routing sub-routes

MySQL 5.6 decompressed version service cannot be started due to system error 1067

Summary of the differences and usage of plugins and components in Vue

Problems and solutions of using jsx syntax in React-vscode

Docker meets Intellij IDEA, Java development improves productivity tenfold

Pure JavaScript to implement the number guessing game

Detailed explanation of how to use zabbix to monitor oracle database

Detailed explanation of the 4 codes that turn the website black, white and gray

Using Vue3 (Part 1) Creating a Vue CLI Project

Node.js adds, deletes, modifies and checks the actual combat record of MySQL database

Recommend

Analysis of Alibaba Cloud CentOS7 server nginx configuration and FAQs

The difference between absolute path and relative path in web page creation

Detailed explanation of the process of using Docker to build a PHP operating environment in CentOS7 environment

How to deploy Solidity smart contracts using ethers.js

Creation, constraints and deletion of foreign keys in MySQL

Detailed explanation of custom events of Vue components

Solution to 404 Problem of Tomcat Installation in Docker

Configure VIM as a C++ development editor in Ubuntu

mysql5.7.19 zip detailed installation process and configuration

Mysql timeline data to obtain the first three data of the same day

Creative opening effect achieved by combining CSS 3.0 with video

Summary of Problems in Installing MySQL 5.7.19 under Linux

VMware Tools installation and configuration tutorial for Ubuntu 18.04

How to query the minimum available id value in the Mysql table

How to compile and install opencv under ubuntu