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
JavaScript uses canvas to draw coordinates and lines
This article shares the specific code of using ca...
The standard HTML writing method is different from the one automatically generated by Dreamweaver
Copy code The code is as follows: <!--doctype ...
Example of how to set up a multi-column equal height layout with CSS
Initially, multiple columns have different conten...
MySQL full-text search usage examples
Table of contents 1. Environmental Preparation 2....
What is Makefile in Linux? How does it work?
Run and compile your programs more efficiently wi...
Three ways to draw a heart shape with CSS
Below, we introduce three ways to draw heart shap...
Vue image cropping component example code
Example: tip: This component is based on vue-crop...
How to view nginx configuration file path and resource file path
View the nginx configuration file path Through ng...
Analysis of the implementation of MySQL statement locking
Abstract: Analysis of two MySQL SQL statement loc...
Automatic backup of MySQL database using shell script
Automatic backup of MySQL database using shell sc...
A solution to the abnormal exit of Tomcat caused by semaphore
I'm playing with big data recently. A friend ...
Mysql 8.0.18 hash join test (recommended)
Hash Join Hash Join does not require any indexes ...
Perfect Solution for No rc.local File in Linux
Newer Linux distributions no longer have the rc.l...
Ideas and codes for implementing iframe to intercept part of the website content
Copy code The code is as follows: <div style=&...
HTML Tutorial: DOCTYPE Abbreviation
When writing HTML code, the first line should be ...