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
Sample code for converting video using ffmpeg command line
Before starting the main text of this article, yo...
The DOCTYPE mode selection mechanism of well-known browsers
Document Scope This article covers mode switching...
Analysis of the event loop mechanism of js
Preface As we all know, JavaScript is single-thre...
MySQL 5.7 and above version download and installation graphic tutorial
1. Download 1. MySQL official website download ad...
Detailed steps to install Anaconda on Linux (Ubuntu 18.04)
Anaconda is the most popular python data science ...
Detailed explanation of HTML page embedding video and JS control switching video example
First, the HTML code to embed the video in the pag...
Solution to the blank page after vue.js packaged project
I believe that many partners who have just come i...
MySQL trigger definition and usage simple example
This article describes the definition and usage o...
Solve the problem of failure to mount files or directories using ./ relative path in docker run
Allow './' relative paths in docker-compo...
A complete guide to clearing floats in CSS (summary)
1. Parent div defines pseudo-classes: after and z...
Several ways to vertically and horizontally center in CSS3 with indefinite height and width
1. Flex layout .father { display: flex; justify-c...
Detailed explanation of how to use the mysql backup script mysqldump
This article shares the MySQL backup script for y...
Exploring the practical value of the CSS property *-gradient
Let me first introduce an interesting property - ...
Summary of three methods of lazy loading lazyLoad using native JS
Table of contents Preface Method 1: High contrast...
How to use commands in Mysql to achieve hierarchical search help detailed explanation
Preface This article mainly introduces the releva...