30款css3实现的鼠标经过图片显示描述特效

小鱼儿 2022-08-06 15:18 414阅读 0赞

今天给大家分享30款css3实现的鼠标经过图片显示描述特效，鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

[![152209zb61ze9229l9266f.png][]][152209zb61ze9229l9266f.png]

[在线预览][Link 1]

[30款css3实现的鼠标经过图片显示描述特效.rar][30_css3_.rar]

实现的代码。

html代码：

1.  <div class="container">  
    
2.            
    
3.          <header class="codrops-header">  
    
4.                  <h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>  
    
5.                  <nav class="codrops-demos">  
    
6.                      <a class="current-demo" href="index.html">Set 1</a>  
    
7.                      <a href="index2.html">Set 2</a>  
    
8.                  </nav>  
    
9.              </header>  
    
10.         <div class="content">  
    
11.             <h2>  
    
12.                 Lily</h2>  
    
13.             <div class="grid">  
    
14.                 <figure class="effect-lily">  
    
15.                         <img src="img/12.jpg" alt="img12"/>  
    
16.                         <figcaption>  
    
17.                             <div>  
    
18.                                 <h2>Nice <span>Lily</span></h2>  
    
19.                                 <p>Lily likes to play with crayons and pencils</p>  
    
20.                             </div>  
    
21.                             <a href="\#">View more</a>  
    
22.                         </figcaption>              
    
23.                     </figure>  
    
24.                 <figure class="effect-lily">  
    
25.                         <img src="img/1.jpg" alt="img1"/>  
    
26.                         <figcaption>  
    
27.                             <div>  
    
28.                                 <h2>Nice <span>Lily</span></h2>  
    
29.                                 <p>Lily likes to play with crayons and pencils</p>  
    
30.                             </div>  
    
31.                             <a href="\#">View more</a>  
    
32.                         </figcaption>              
    
33.                     </figure>  
    
34.             </div>  
    
35.             <h2>  
    
36.                 Sadie</h2>  
    
37.             <div class="grid">  
    
38.                 <figure class="effect-sadie">  
    
39.                         <img src="img/2.jpg" alt="img02"/>  
    
40.                         <figcaption>  
    
41.                             <h2>Holy <span>Sadie</span></h2>  
    
42.                             <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>  
    
43.                             <a href="\#">View more</a>  
    
44.                         </figcaption>              
    
45.                     </figure>  
    
46.                 <figure class="effect-sadie">  
    
47.                         <img src="img/14.jpg" alt="img14"/>  
    
48.                         <figcaption>  
    
49.                             <h2>Holy <span>Sadie</span></h2>  
    
50.                             <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>  
    
51.                             <a href="\#">View more</a>  
    
52.                         </figcaption>              
    
53.                     </figure>  
    
54.             </div>  
    
55.             <h2>  
    
56.                 Honey</h2>  
    
57.             <div class="grid">  
    
58.                 <figure class="effect-honey">  
    
59.                         <img src="img/4.jpg" alt="img04"/>  
    
60.                         <figcaption>  
    
61.                             <h2>Dreamy <span>Honey</span> <i>Now</i></h2>  
    
62.                             <a href="\#">View more</a>  
    
63.                         </figcaption>              
    
64.                     </figure>  
    
65.                 <figure class="effect-honey">  
    
66.                         <img src="img/5.jpg" alt="img05"/>  
    
67.                         <figcaption>  
    
68.                             <h2>Dreamy <span>Honey</span> <i>Now</i></h2>  
    
69.                             <a href="\#">View more</a>  
    
70.                         </figcaption>              
    
71.                     </figure>  
    
72.             </div>  
    
73.             <h2>  
    
74.                 Layla</h2>  
    
75.             <div class="grid">  
    
76.                 <figure class="effect-layla">  
    
77.                         <img src="img/6.jpg" alt="img06"/>  
    
78.                         <figcaption>  
    
79.                             <h2>Crazy <span>Layla</span></h2>  
    
80.                             <p>When Layla appears, she brings an eternal summer along.</p>  
    
81.                             <a href="\#">View more</a>  
    
82.                         </figcaption>              
    
83.                     </figure>  
    
84.                 <figure class="effect-layla">  
    
85.                         <img src="img/3.jpg" alt="img03"/>  
    
86.                         <figcaption>  
    
87.                             <h2>Crazy <span>Layla</span></h2>  
    
88.                             <p>When Layla appears, she brings an eternal summer along.</p>  
    
89.                             <a href="\#">View more</a>  
    
90.                         </figcaption>              
    
91.                     </figure>  
    
92.             </div>  
    
93.             <h2>  
    
94.                 Zoe</h2>  
    
95.             <div class="grid">  
    
96.                 <figure class="effect-zoe">  
    
97.                         <img src="img/25.jpg" alt="img25"/>  
    
98.                         <figcaption>  
    
99.                             <h2>Creative <span>Zoe</span></h2>  
    
100.                             <p class="icon-links">  
    
101.                                 <a href="\#"><span class="icon-heart"></span></a>  
    
102.                                 <a href="\#"><span class="icon-eye"></span></a>  
    
103.                                 <a href="\#"><span class="icon-paper-clip"></span></a>  
    
104.                             </p>  
    
105.                             <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>  
    
106.                         </figcaption>              
    
107.                     </figure>  
    
108.                 <figure class="effect-zoe">  
    
109.                         <img src="img/26.jpg" alt="img26"/>  
    
110.                         <figcaption>  
    
111.                             <h2>Creative <span>Zoe</span></h2>  
    
112.                             <p class="icon-links">  
    
113.                                 <a href="\#"><span class="icon-heart"></span></a>  
    
114.                                 <a href="\#"><span class="icon-eye"></span></a>  
    
115.                                 <a href="\#"><span class="icon-paper-clip"></span></a>  
    
116.                             </p>  
    
117.                             <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>  
    
118.                         </figcaption>              
    
119.                     </figure>  
    
120.             </div>  
    
121.             <h2>  
    
122.                 Oscar</h2>  
    
123.             <div class="grid">  
    
124.                 <figure class="effect-oscar">  
    
125.                         <img src="img/9.jpg" alt="img09"/>  
    
126.                         <figcaption>  
    
127.                             <h2>Warm <span>Oscar</span></h2>  
    
128.                             <p>Oscar is a decent man. He used to clean porches with pleasure.</p>  
    
129.                             <a href="\#">View more</a>  
    
130.                         </figcaption>              
    
131.                     </figure>  
    
132.                 <figure class="effect-oscar">  
    
133.                         <img src="img/10.jpg" alt="img10"/>  
    
134.                         <figcaption>  
    
135.                             <h2>Warm <span>Oscar</span></h2>  
    
136.                             <p>Oscar is a decent man. He used to clean porches with pleasure.</p>  
    
137.                             <a href="\#">View more</a>  
    
138.                         </figcaption>              
    
139.                     </figure>  
    
140.             </div>  
    
141.             <h2>  
    
142.                 Marley</h2>  
    
143.             <div class="grid">  
    
144.                 <figure class="effect-marley">  
    
145.                         <img src="img/11.jpg" alt="img11"/>  
    
146.                         <figcaption>  
    
147.                             <h2>Sweet <span>Marley</span></h2>  
    
148.                             <p>Marley tried to convince her but she was not interested.</p>  
    
149.                             <a href="\#">View more</a>  
    
150.                         </figcaption>              
    
151.                     </figure>  
    
152.                 <figure class="effect-marley">  
    
153.                         <img src="img/12.jpg" alt="img12"/>  
    
154.                         <figcaption>  
    
155.                             <h2>Sweet <span>Marley</span></h2>  
    
156.                             <p>Marley tried to convince her but she was not interested.</p>  
    
157.                             <a href="\#">View more</a>  
    
158.                         </figcaption>              
    
159.                     </figure>  
    
160.             </div>  
    
161.             <h2>  
    
162.                 Ruby</h2>  
    
163.             <div class="grid">  
    
164.                 <figure class="effect-ruby">  
    
165.                         <img src="img/13.jpg" alt="img13"/>  
    
166.                         <figcaption>  
    
167.                             <h2>Glowing <span>Ruby</span></h2>  
    
168.                             <p>Ruby did not need any help. Everybody knew that.</p>  
    
169.                             <a href="\#">View more</a>  
    
170.                         </figcaption>              
    
171.                     </figure>  
    
172.                 <figure class="effect-ruby">  
    
173.                         <img src="img/14.jpg" alt="img14"/>  
    
174.                         <figcaption>  
    
175.                             <h2>Glowing <span>Ruby</span></h2>  
    
176.                             <p>Ruby did not need any help. Everybody knew that.</p>  
    
177.                             <a href="\#">View more</a>  
    
178.                         </figcaption>              
    
179.                     </figure>  
    
180.             </div>  
    
181.             <h2>  
    
182.                 Roxy</h2>  
    
183.             <div class="grid">  
    
184.                 <figure class="effect-roxy">  
    
185.                         <img src="img/15.jpg" alt="img15"/>  
    
186.                         <figcaption>  
    
187.                             <h2>Charming <span>Roxy</span></h2>  
    
188.                             <p>Roxy was my best friend. She'd cross any border for me.</p>  
    
189.                             <a href="\#">View more</a>  
    
190.                         </figcaption>              
    
191.                     </figure>  
    
192.                 <figure class="effect-roxy">  
    
193.                         <img src="img/1.jpg" alt="img01"/>  
    
194.                         <figcaption>  
    
195.                             <h2>Charming <span>Roxy</span></h2>  
    
196.                             <p>Roxy was my best friend. She'd cross any border for me.</p>  
    
197.                             <a href="\#">View more</a>  
    
198.                         </figcaption>              
    
199.                     </figure>  
    
200.             </div>  
    
201.             <h2>  
    
202.                 Bubba</h2>  
    
203.             <div class="grid">  
    
204.                 <figure class="effect-bubba">  
    
205.                         <img src="img/2.jpg" alt="img02"/>  
    
206.                         <figcaption>  
    
207.                             <h2>Fresh <span>Bubba</span></h2>  
    
208.                             <p>Bubba likes to appear out of thin air.</p>  
    
209.                             <a href="\#">View more</a>  
    
210.                         </figcaption>              
    
211.                     </figure>  
    
212.                 <figure class="effect-bubba">  
    
213.                         <img src="img/16.jpg" alt="img16"/>  
    
214.                         <figcaption>  
    
215.                             <h2>Fresh <span>Bubba</span></h2>  
    
216.                             <p>Bubba likes to appear out of thin air.</p>  
    
217.                             <a href="\#">View more</a>  
    
218.                         </figcaption>              
    
219.                     </figure>  
    
220.             </div>  
    
221.             <h2>  
    
222.                 Romeo</h2>  
    
223.             <div class="grid">  
    
224.                 <figure class="effect-romeo">  
    
225.                         <img src="img/17.jpg" alt="img17"/>  
    
226.                         <figcaption>  
    
227.                             <h2>Wild <span>Romeo</span></h2>  
    
228.                             <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>  
    
229.                             <a href="\#">View more</a>  
    
230.                         </figcaption>              
    
231.                     </figure>  
    
232.                 <figure class="effect-romeo">  
    
233.                         <img src="img/18.jpg" alt="img18"/>  
    
234.                         <figcaption>  
    
235.                             <h2>Wild <span>Romeo</span></h2>  
    
236.                             <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>  
    
237.                             <a href="\#">View more</a>  
    
238.                         </figcaption>              
    
239.                     </figure>  
    
240.             </div>  
    
241.             <h2>  
    
242.                 Dexter</h2>  
    
243.             <div class="grid">  
    
244.                 <figure class="effect-dexter">  
    
245.                         <img src="img/19.jpg" alt="img19"/>  
    
246.                         <figcaption>  
    
247.                             <h2>Strange <span>Dexter</span></h2>  
    
248.                             <p>Dexter had his own strange way. You could watch him training ants.</p>  
    
249.                             <a href="\#">View more</a>  
    
250.                         </figcaption>              
    
251.                     </figure>  
    
252.                 <figure class="effect-dexter">  
    
253.                         <img src="img/12.jpg" alt="img12"/>  
    
254.                         <figcaption>  
    
255.                             <h2>Strange <span>Dexter</span></h2>  
    
256.                             <p>Dexter had his own strange way. You could watch him training ants.</p>  
    
257.                             <a href="\#">View more</a>  
    
258.                         </figcaption>              
    
259.                     </figure>  
    
260.             </div>  
    
261.             <h2>  
    
262.                 Sarah</h2>  
    
263.             <div class="grid">  
    
264.                 <figure class="effect-sarah">  
    
265.                         <img src="img/13.jpg" alt="img13"/>  
    
266.                         <figcaption>  
    
267.                             <h2>Free <span>Sarah</span></h2>  
    
268.                             <p>Sarah likes to watch clouds. She's quite depressed.</p>  
    
269.                             <a href="\#">View more</a>  
    
270.                         </figcaption>              
    
271.                     </figure>  
    
272.                 <figure class="effect-sarah">  
    
273.                         <img src="img/20.jpg" alt="img20"/>  
    
274.                         <figcaption>  
    
275.                             <h2>Free <span>Sarah</span></h2>  
    
276.                             <p>Sarah likes to watch clouds. She's quite depressed.</p>  
    
277.                             <a href="\#">View more</a>  
    
278.                         </figcaption>              
    
279.                     </figure>  
    
280.             </div>  
    
281.             <h2>  
    
282.                 Chico</h2>  
    
283.             <div class="grid">  
    
284.                 <figure class="effect-chico">  
    
285.                         <img src="img/15.jpg" alt="img15"/>  
    
286.                         <figcaption>  
    
287.                             <h2>Silly <span>Chico</span></h2>  
    
288.                             <p>Chico's main fear was missing the morning bus.</p>  
    
289.                             <a href="\#">View more</a>  
    
290.                         </figcaption>              
    
291.                     </figure>  
    
292.                 <figure class="effect-chico">  
    
293.                         <img src="img/4.jpg" alt="img04"/>  
    
294.                         <figcaption>  
    
295.                             <h2>Silly <span>Chico</span></h2>  
    
296.                             <p>Chico's main fear was missing the morning bus.</p>  
    
297.                             <a href="\#">View more</a>  
    
298.                         </figcaption>              
    
299.                     </figure>  
    
300.             </div>  
    
301.             <h2>  
    
302.                 Milo</h2>  
    
303.             <div class="grid">  
    
304.                 <figure class="effect-milo">  
    
305.                         <img src="img/11.jpg" alt="img11"/>  
    
306.                         <figcaption>  
    
307.                             <h2>Faithful <span>Milo</span></h2>  
    
308.                             <p>Milo went to the woods. He took a fun ride and never came back.</p>  
    
309.                             <a href="\#">View more</a>  
    
310.                         </figcaption>              
    
311.                     </figure>  
    
312.                 <figure class="effect-milo">  
    
313.                         <img src="img/3.jpg" alt="img03"/>  
    
314.                         <figcaption>  
    
315.                             <h2>Faithful <span>Milo</span></h2>  
    
316.                             <p>Milo went to the woods. He took a fun ride and never came back.</p>  
    
317.                             <a href="\#">View more</a>  
    
318.                         </figcaption>              
    
319.                     </figure>  
    
320.             </div>  
    
321.         </div>  
    
322.         <nav class="codrops-demos">  
    
323.                 <a class="current-demo" href="index.html">Set 1</a>  
    
324.                 <a href="index2.html">Set 2</a>  
    
325.             </nav>  
    
326.           
    
327.     </div>

[152209zb61ze9229l9266f.png]: http://www.html5cn.org/data/attachment/portal/201502/02/152209zb61ze9229l9266f.png
[Link 1]: http://www.w2bc.com/demo/2015-01-30-HoverEffectIdeas/index.html
[30_css3_.rar]: http://www.html5cn.org/portal.php?mod=attachment&id=13649