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:
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!
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
Recommend
Vue2 cube-ui time selector detailed explanation
Table of contents Preface 1. Demand and Effect ne...
XHTML Getting Started Tutorial: Using the Frame Tag
<br />The frame structure allows several web...
Solution to MySQL error code 1862 your password has expired
The blogger hasn't used MySQL for a month or ...
Detailed explanation of the use of React list bar and shopping cart components
This article example shares the specific code of ...
Rules for using mysql joint indexes
A joint index is also called a composite index. F...
JavaScript implements class lottery applet
This article shares the specific code of JavaScri...
Vue detailed explanation of mixins usage
Table of contents Preface 1. What are Mixins? 2. ...
A brief discussion on the magical uses of CSS pseudo-elements and pseudo-classes
CSS plays a very important role in a web page. Wi...
Script to quickly list all host names (computer names) in the LAN under Linux
Recently, I have a need to list all host names in...
MySQL joint index effective conditions and index invalid conditions
Table of contents 1. Conditions for joint index f...
Detailed explanation of Vue's monitoring properties
Table of contents Vue monitor properties What is ...
Methods of adaptive web design (good access experience on mobile phones)
1. Add the viewport tag to the HTML header. At th...
Solve the problem of blank gap at the bottom of Img picture
When working on a recent project, I found that th...
Steps to enable TLS in Docker for secure configuration
Preface I had previously enabled Docker's 237...
Example of using JSX to build component Parser development
Table of contents JSX environment construction Se...