CSS图片响应悬停效果

效果图
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d旋转title>
    <style>
*{
padding:0;
margin:0;
font-family:'poppins',sana-serif;
}
body{
display:flex;
justify-content:center;
align-items:center;
background:#16384c;
}
.container{
position:relative;
width:1100px;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
padding:30px;
}
.container .card{
position:relative;
max-width:250px;
height:250px;
background:#fff;
margin:30px 10px;
padding:20px 15px;
display:flex;
flex-direction:column;
box-shadow:0 5px 202 px rgba(0,0,0,0.5);
transition:0.3s ease-in-out;
}
.container .card:hover{
height:420px;
}
.container .card .imgBx{
position:relative;
width:200px;
height:380px;
top:-50px;
left:20px;
z-index:1;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}
.container .card .imgBx img{
max-width:100%;
border-radius:4px;
}
.container .card .content{
position:relative;
margin-top:-10px;
padding:10px 15px;
text-align:center;
color:#111;
visibility:hidden;
opacity:0;
transition:0.3s ease-in-out;
}
.container .card:hover .content{
visibility:visible;
opacity:1;
margin-top:-40px;
margin-top-delay:0.3s;
}

    style>

    <script>
    script>
head>
<body>
<div class="container">
    <div class="card">
<div class='imgBx'>
   <img src="img/1.png">
div>
<div class="content">
    <h2>Card Crazyh2>
    <p>guewfyb1i1h92hhufbubf,usd9qwhd9db91be12h0hw0qbp
    hciubduhw8dhhdbuw.
    p>
div>
div>
div>
<div class="container">
    <div class="card">
        <div class='imgBx'>
            <img src="img/2.png">
        div>
        <div class="content">
            <h2>Card Crazyh2>
            <p>guewfyb1i1h92hhufbubf,usd9qwhd9db91be12h0hw0qbp
                hciubduhw8dhhdbuw.
            p>
        div>
    div>
div>
<div class="container">
    <div class="card">
        <div class='imgBx'>
            <img src="img/3.png">
        div>
        <div class="content">
            <h2>Card Crazyh2>
            <p>guewfyb1i1h92hhufbubf,usd9qwhd9db91be12h0hw0qbp
                hciubduhw8dhhdbuw.
            p>
        div>
    div>
div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

相关阅读:
亚马逊跟卖有效找listing，适合各阶段卖家
大数据项目之电商数仓、日志采集Flume配置概述、日志采集Flume配置实操
ISO20000认证一般要多少钱
MacOS 安装MySQL 8（最详细，包含MacOS下MySQL的下载&安装&使用三部曲）
chatGPT会替代程序员吗？
30fps跳帧为20fps
行列式基础
核医学重点归纳
面向接口编程
设计模式-原型模式

原文地址：https://blog.csdn.net/weixin_57780589/article/details/127429026