Blogger Information
Blog 12
fans 0
comment 0
visits 8907
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2020-05-28——如何使用CSS在鼠标悬停时缩放图像?
A 枕上人如玉、
Original
643 people have browsed it

图像缩放效果,是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下,这个效果很有用。

有两种方法可以创建鼠标悬停效果。
1.使用JavaScript
2.使用CSS

在本文中,我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码,第二部分包含CSS代码。

HTML代码:在本文中,我们将使用HTML创建悬停效果时图像缩放的基本结构。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title> How to Zoom an Image on Mouse Hover using CSS? </title>
  7. </head>
  8. <body>
  9. <div class="geeks">
  10. <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" />
  11. </div>
  12. </body>
  13. </html>

CSS代码:在本节中,我们将使用一些CSS属性在鼠标悬停时缩放图像。要创建缩放效果,我们将使用transition和transform这两个属性。

  1. <style>
  2. .geeks {
  3. width: 300px;
  4. height: 300px;
  5. overflow: hidden;
  6. margin: 0 auto;
  7. }
  8. .geeks img {
  9. width: 100%;
  10. transition: 0.5s all ease-in-out;
  11. }
  12. .geeks:hover img {
  13. transform: scale(1.5);
  14. }
  15. </style>

完整代码:在本文中,我们将结合以上两个部分,使用HTML和CSS在鼠标悬停时创建图像缩放效果。

例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title> How to Zoom an Image on Mouse Hover using CSS? </title>
  7. <style>
  8. .geeks {
  9. width: 300px;
  10. height: 300px;
  11. overflow: hidden;
  12. margin: 0 auto;
  13. }
  14. .geeks img {
  15. width: 100%;
  16. transition: 0.5s all ease-in-out;
  17. }
  18. .geeks:hover img {
  19. transform: scale(1.5);
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="geeks"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" />
  25. </div>
  26. </body>
  27. </html>

最终效果:
640.gif

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post