HTML+CSS实现“个人资料卡悬停效果”

yycvip

这是一个更加简洁的效果，当你将鼠标悬停在个人资料卡上时，卡片中的照片会放大，同时显示出人物的姓名和社交媒体链接。这种设计简约而不失美感，不会让用户感到信息过载。

HTML

1. <div class="container">
   
2.   <div class="card card0">
   
3.     <div class="border">
   
4.       <h2>Al Pacino</h2>
   
5.       <div class="icons">
   
6.         <i class="fa fa-codepen" aria-hidden="true"></i>
   
7.         <i class="fa fa-instagram" aria-hidden="true"></i>
   
8.         <i class="fa fa-dribbble" aria-hidden="true"></i>
   
9.         <i class="fa fa-twitter" aria-hidden="true"></i>
   
10.         <i class="fa fa-facebook" aria-hidden="true"></i>
    
11.       </div>
    
12.     </div>
    
13.   </div>
    
14.   <div class="card card1">
    
15.     <div class="border">
    
16.       <h2>Ben Stiller</h2>
    
17.       <div class="icons">
    
18.         <i class="fa fa-codepen" aria-hidden="true"></i>
    
19.         <i class="fa fa-instagram" aria-hidden="true"></i>
    
20.         <i class="fa fa-dribbble" aria-hidden="true"></i>
    
21.         <i class="fa fa-twitter" aria-hidden="true"></i>
    
22.         <i class="fa fa-facebook" aria-hidden="true"></i>
    
23.       </div>
    
24.     </div>
    
25.   </div>
    
26.   <div class="card card2">
    
27.     <div class="border">
    
28.       <h2>Patrick Stewart</h2>
    
29.       <div class="icons">
    
30.         <i class="fa fa-codepen" aria-hidden="true"></i>
    
31.         <i class="fa fa-instagram" aria-hidden="true"></i>
    
32.         <i class="fa fa-dribbble" aria-hidden="true"></i>
    
33.         <i class="fa fa-twitter" aria-hidden="true"></i>
    
34.         <i class="fa fa-facebook" aria-hidden="true"></i>
    
35.       </div>
    
36.     </div>
    
37.   </div>
    
38. </div>

复制代码

CSS

1. .container
   
2.   height: 100vh
   
3.   width: 100vw
   
4.   max-height: 800px
   
5.   max-width: 1280px
   
6.   min-height: 600px
   
7.   min-width: 1000px
   
8.   display: flex
   
9.   justify-content: space-around
   
10.   align-items: center
    
11.   margin: 0 auto
    
12. 
    
13. .border
    
14.   height: 369px
    
15.   width: 290px
    
16.   background: transparent
    
17.   border-radius: 10px
    
18.   transition: border 1s
    
19.   position: relative
    
20. 
    
21.   &:hover
    
22.     border: 1px solid white
    
23. 
    
24. .card
    
25.   height: 379px
    
26.   width: 300px
    
27.   background: grey
    
28.   border-radius: 10px
    
29.   transition: background 0.8s
    
30.   overflow: hidden
    
31.   background: black
    
32.   box-shadow: 0 70px 63px -60px #000000
    
33.   display: flex
    
34.   justify-content: center
    
35.   align-items: center
    
36.   position: relative
    
37. 
    
38. .card0
    
39.   background: url('https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg') center center no-repeat
    
40.   background-size: 300px
    
41. 
    
42.   &:hover
    
43.     background: url('https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg') left center no-repeat
    
44.     background-size: 600px
    
45. 
    
46.     h2
    
47.       opacity: 1
    
48. 
    
49.     .fa
    
50.       opacity: 1
    
51. 
    
52. .card1
    
53.   background: url('https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg') center center no-repeat
    
54.   background-size: 300px
    
55. 
    
56.   &:hover
    
57.     background: url('https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg') left center no-repeat
    
58.     background-size: 600px
    
59. 
    
60.     h2
    
61.       opacity: 1
    
62. 
    
63.     .fa
    
64.       opacity: 1
    
65. 
    
66. .card2
    
67.   background: url('https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg') center center no-repeat
    
68.   background-size: 300px
    
69. 
    
70.   &:hover
    
71.     background: url('https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg') left center no-repeat
    
72.     background-size: 600px
    
73. 
    
74.     h2
    
75.       opacity: 1
    
76. 
    
77.     .fa
    
78.       opacity: 1
    
79. 
    
80. h2
    
81.   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
    
82.   color: white
    
83.   margin: 20px
    
84.   opacity: 0
    
85.   transition: opacity 1s
    
86. 
    
87. .fa
    
88.   opacity: 0
    
89.   transition: opacity 1s
    
90. 
    
91. .icons
    
92.   position: absolute
    
93.   fill: #fff
    
94.   color: #fff
    
95.   height: 130px
    
96.   top: 226px
    
97.   width: 50px
    
98.   display: flex
    
99.   flex-direction: column
    
100.   align-items: center
     
101.   justify-content: space-around

复制代码