HTML+CSS to achieve responsive card hover effect
|
Not much to say, let's see the effect first:
Card hover, responsive card, simple effect. accomplish:1. Define the label, .kapian is the bottom box, and then two sub-boxes, one for the picture and one for the text:
<div class="kapian">
<div class="tu">
<img src="3.2.png">
</div>
<div class="wenben">
<h2>The aurora borealis</h2>
<p style="padding-bottom: 20px;">natural</p>
<p>
Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
I love the aurora borealis. It's so beautiful.
</p>
</div>
</div>2. First define the basic CSS style of the bottom box, length, width, etc., which will not be described in detail:
.kapian{
position: relative;
width: 300px;
height: 400px;
border-radius: 3px;
background-color: #fff;
box-shadow: 2px 3px 3px rgb(139, 138, 138);
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
}
.kapian:hover{
box-shadow: 2px 3px 10px rgb(36, 35, 35);
} :Hover the box shadow changes after the mouse passes over it. 3. The basic style of the picture, using absolute positioning:
.tu{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
overflow: hidden;
}
.tu img{
width: 100%;
height: 100%;
transition: all 0.5s;
}
.kapian:hover .tu img{
transform: scale(1.2);
filter: blur(1px);
} : When the mouse is hovered over, the image becomes larger and blurry; 4. Define the basic style of the box containing the text, using absolute positioning:
.wenben{
position: absolute;
bottom: -200px;
width: 100%;
height: 300px;
background-color: rgb(247, 242, 242);
transition: 0.5s;
}
.kapian:hover .wenben{
bottom: 0px;
}:When the mouse is hovered over, the bottom of the absolutely positioned text box changes, making the text box expand upwards; 5. The style of the characters in the text box:
.wenben h2{
color: rgb(21, 74, 172);
line-height: 60px;
text-align: center;
}
.wenben p{
padding: 0 30px;
font-family: 'fangsong';
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: center;
}Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: radial-gradient(rgb(241, 238, 238),black);
}
.kapian{
position: relative;
width: 300px;
height: 400px;
border-radius: 3px;
background-color: #fff;
box-shadow: 2px 3px 3px rgb(139, 138, 138);
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
}
.kapian:hover{
box-shadow: 2px 3px 10px rgb(36, 35, 35);
}
.tu{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
overflow: hidden;
}
.tu img{
width: 100%;
height: 100%;
transition: all 0.5s;
}
.kapian:hover .tu img{
transform: scale(1.2);
filter: blur(1px);
}
.wenben{
position: absolute;
bottom: -200px;
width: 100%;
height: 300px;
background-color: rgb(247, 242, 242);
transition: 0.5s;
}
.kapian:hover .wenben{
bottom: 0px;
}
.wenben h2{
color: rgb(21, 74, 172);
line-height: 60px;
text-align: center;
}
.wenben p{
padding: 0 30px;
font-family: 'fangsong';
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="kapian">
<div class="tu">
<img src="3.2.png">
</div>
<div class="wenben">
<h2>The aurora borealis</h2>
<p style="padding-bottom: 20px;">natural</p>
<p>
Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole.
I love the aurora borealis. It's so beautiful.
</p>
</div>
</div>
</body>
</html>Summarize:Hope is on the way~
This is the end of this article about how to achieve responsive card hover effects with html+css. For more relevant html+css card hover content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Pure CSS3 realizes the effect of div entering and exiting in order
>>: CSS implements the function of hiding the search box (animation forward and reverse sequence)
Recommend
mysql delete multi-table connection deletion function
Deleting a single table: DELETE FROM tableName WH...
Example code for using HTML ul and li tags to display images
Copy the following code to the code area of Drea...
How does Vue implement communication between components?
Table of contents 1. Communication between father...
Detailed deployment of docker+gitlab+gitlab-runner
environment Server: centos7 Client: window Deploy...
How to automatically execute SQL statements when MySQL in Docker starts
When creating a MySQL container with Docker, some...
Detailed explanation of how a SQL statement is executed in MySQL
Overview I have recently started learning MySQL r...
Realization of real-time file synchronization between Linux servers
Usage scenarios For existing servers A and B, if ...
Detailed explanation of display modes in CSS tags
Label display mode (important) div and span tags ...
Vue component library ElementUI implements table loading tree data tutorial
ElementUI implements a table tree list loading tu...
Solve the problem that Navicat cannot connect to the MySQL server in the Centos system in VMware
Solution to Host 'xxxx' is not allowed to...
How to deploy ElasticSearch in Docker
1. What is ElasticSearch? Elasticsearch is also d...
mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)
Regarding uninstalling the previously installed v...
Super detailed steps to install zabbix3.0 on centos7
Preface Recently, part of the company's busin...
CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom
Preview address: https://ovsexia.gitee.io/leftfix...
Detailed explanation of the deep and shallow cloning principles of JavaScript arrays and non-array objects
Table of contents What are shallow cloning and de...