轻松实现卡片悬停效果的 8 个实用代码片段

yycvip

卡片 UI 布局因其多功能性而在网页设计中大受欢迎，适用于展示各种内容。为卡片添加悬停效果不仅能增强视觉吸引力，还能提升用户体验。以下是一些用 CSS 和 JavaScript 实现的优秀卡片悬停效果示例，供你参考。

有时候，一次性展示大量内容可能会让用户感到不知所措。这款卡片交互效果就能很好地解决这个问题。卡片初始状态下只有一个简单的标题和背景图片，当你将鼠标悬停在卡片上时，会出现描述性文字和号召性用语。这种效果是通过纯 CSS 实现的，非常简洁。


HTML

1. - var cards = [{ title: 'Mountain View', copy: 'Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains', button: 'View Trips' }, { title: 'To The Beach', copy: 'Plan your next beach trip with these fabulous destinations', button: 'View Trips' }, { title: 'Desert Destinations', copy: 'It\'s the desert you\'ve always dreamed of', button: 'Book Now' }, { title: 'Explore The Galaxy', copy: 'Seriously, straight up, just blast off into outer space today', button: 'Book Now' }]
   
2. 
   
3. 
   
4. mixin card(title, copy, button)
   
5.   .card
   
6.     .content
   
7.       h2.title= title
   
8.       p.copy= copy
   
9.       button.btn= button
   
10. 
    
11. main.page-content
    
12.   each card in cards
    
13.     +card(card.title, card.copy, card.button)

复制代码

CSS

1. @import url('https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap');
   
2. 
   
3. $imageIds: '1517021897933-0e0319cfbc28', '1533903345306-15d1c30952de', '1545243424-0ce743321e11', '1531306728370-e2ebd9d7bb99';
   
4. 
   
5. $bp-md: 600px;
   
6. $bp-lg: 800px;
   
7. 
   
8. :root {
   
9.   --d: 700ms;
   
10.   --e: cubic-bezier(0.19, 1, 0.22, 1);
    
11.   --font-sans: 'Rubik', sans-serif;
    
12.   --font-serif: 'Cardo', serif;
    
13. }
    
14. 
    
15. * {
    
16.   box-sizing: border-box;
    
17. }
    
18. 
    
19. html, body {
    
20.   height: 100%;
    
21. }
    
22. 
    
23. body {
    
24.   display: grid;
    
25.   place-items: center;
    
26. }
    
27. 
    
28. .page-content {
    
29.   display: grid;
    
30.   grid-gap: 1rem;
    
31.   padding: 1rem;
    
32.   max-width: 1024px;
    
33.   margin: 0 auto;
    
34.   font-family: var(--font-sans);
    
35.   
    
36.   @media (min-width: $bp-md) {
    
37.     grid-template-columns: repeat(2, 1fr);
    
38.   }
    
39.   
    
40.   @media (min-width: $bp-lg) {
    
41.     grid-template-columns: repeat(4, 1fr);
    
42.   }
    
43. }
    
44. 
    
45. 
    
46. 
    
47. .card {  
    
48.   position: relative;
    
49.   display: flex;
    
50.   align-items: flex-end;
    
51.   overflow: hidden;
    
52.   padding: 1rem;
    
53.   width: 100%;
    
54.   text-align: center;
    
55.   color: whitesmoke;
    
56.   background-color: whitesmoke;
    
57.   box-shadow: 0 1px 1px rgba(0,0,0,0.1),
    
58.     0 2px 2px rgba(0,0,0,0.1),
    
59.     0 4px 4px rgba(0,0,0,0.1),
    
60.     0 8px 8px rgba(0,0,0,0.1),
    
61.     0 16px 16px rgba(0,0,0,0.1);
    
62.   
    
63.   @media (min-width: $bp-md) {
    
64.     height: 350px;
    
65.   }
    
66.   
    
67.   &:before {
    
68.     content: '';
    
69.     position: absolute;
    
70.     top: 0;
    
71.     left: 0;
    
72.     width: 100%;
    
73.     height: 110%;
    
74.     background-size: cover;
    
75.     background-position: 0 0;
    
76.     transition: transform calc(var(--d) * 1.5) var(--e);
    
77.     pointer-events: none;
    
78.   }
    
79.   
    
80.   &:after {
    
81.     content: '';
    
82.     display: block;
    
83.     position: absolute;
    
84.     top: 0;
    
85.     left: 0;
    
86.     width: 100%;
    
87.     height: 200%;
    
88.     pointer-events: none;
    
89.     background-image: linear-gradient(
    
90.       to bottom,
    
91.       hsla(0, 0%, 0%, 0) 0%,
    
92.       hsla(0, 0%, 0%, 0.009) 11.7%,
    
93.       hsla(0, 0%, 0%, 0.034) 22.1%,
    
94.       hsla(0, 0%, 0%, 0.072) 31.2%,
    
95.       hsla(0, 0%, 0%, 0.123) 39.4%,
    
96.       hsla(0, 0%, 0%, 0.182) 46.6%,
    
97.       hsla(0, 0%, 0%, 0.249) 53.1%,
    
98.       hsla(0, 0%, 0%, 0.320) 58.9%,
    
99.       hsla(0, 0%, 0%, 0.394) 64.3%,
    
100.       hsla(0, 0%, 0%, 0.468) 69.3%,
     
101.       hsla(0, 0%, 0%, 0.540) 74.1%,
     
102.       hsla(0, 0%, 0%, 0.607) 78.8%,
     
103.       hsla(0, 0%, 0%, 0.668) 83.6%,
     
104.       hsla(0, 0%, 0%, 0.721) 88.7%,
     
105.       hsla(0, 0%, 0%, 0.762) 94.1%,
     
106.       hsla(0, 0%, 0%, 0.790) 100%
     
107.     );
     
108.     transform: translateY(-50%);
     
109.     transition: transform calc(var(--d) * 2) var(--e);
     
110.   }
     
111.   
     
112.   @each $id in $imageIds {
     
113.     $i: index($imageIds, $id);
     
114.    
     
115.     &:nth-child(#{$i}):before {
     
116.       background-image: url(https://images.unsplash.com/photo-#{$id}?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
     
117.     }
     
118.   }
     
119. }
     
120. 
     
121. .content {
     
122.   position: relative;
     
123.   display: flex;
     
124.   flex-direction: column;
     
125.   align-items: center;
     
126.   width: 100%;
     
127.   padding: 1rem;
     
128.   transition: transform var(--d) var(--e);
     
129.   z-index: 1;
     
130.   
     
131.   > * + * {
     
132.     margin-top: 1rem;
     
133.   }
     
134. }
     
135. 
     
136. .title {
     
137.   font-size: 1.3rem;
     
138.   font-weight: bold;
     
139.   line-height: 1.2;
     
140. }
     
141. 
     
142. .copy {
     
143.   font-family: var(--font-serif);
     
144.   font-size: 1.125rem;
     
145.   font-style: italic;
     
146.   line-height: 1.35;
     
147. }
     
148. 
     
149. .btn {
     
150.   cursor: pointer;
     
151.   margin-top: 1.5rem;
     
152.   padding: 0.75rem 1.5rem;
     
153.   font-size: 0.65rem;
     
154.   font-weight: bold;
     
155.   letter-spacing: 0.025rem;
     
156.   text-transform: uppercase;
     
157.   color: white;
     
158.   background-color: black;
     
159.   border: none;
     
160.   
     
161.   &:hover {
     
162.     background-color: lighten(black, 5%);
     
163.   }
     
164.   
     
165.   &:focus {
     
166.     outline: 1px dashed yellow;
     
167.     outline-offset: 3px;
     
168.   }
     
169. }
     
170. 
     
171. @media (hover: hover) and (min-width: $bp-md) {
     
172.   .card:after {
     
173.     transform: translateY(0);
     
174.   }
     
175.   
     
176.   .content {
     
177.     transform: translateY(calc(100% - 4.5rem));
     
178.    
     
179.     > *:not(.title) {
     
180.       opacity: 0;
     
181.       transform: translateY(1rem);
     
182.       transition:
     
183.         transform var(--d) var(--e),
     
184.         opacity var(--d) var(--e);
     
185.     }
     
186.   }
     
187.   
     
188.   .card:hover,
     
189.   .card:focus-within {
     
190.     align-items: center;
     
191. 
     
192.     &:before { transform: translateY(-4%); }
     
193.     &:after { transform: translateY(-50%); }
     
194. 
     
195.     .content {
     
196.       transform: translateY(0);
     
197. 
     
198.       > *:not(.title) {
     
199.         opacity: 1;
     
200.         transform: translateY(0);
     
201.         transition-delay: calc(var(--d) / 8);
     
202.       }
     
203.     }
     
204.   }
     
205.   
     
206.   .card:focus-within {
     
207.     &:before,
     
208.     &:after,
     
209.     .content,
     
210.     .content > *:not(.title) {
     
211.       transition-duration: 0s;
     
212.     }
     
213.   }
     
214. }

复制代码