参考手册
CSS3 图片样式
CSS3 图片滤镜
CSS3 图片翻转
返回 CSS3 图片样式

CSS3 图片悬停效果

下面是鼠标悬停在图片上的几种效果：文本淡入，淡入框，上下左右滑入效果。

淡入文本:

Avatar
Hello World

淡入框:

Avatar
John

顶部划入:

Avatar
Hello World

淡入文本 代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 50%;
  8. }
  10. .image {
  11.   display: block;
  12.   width: 100%;
  13.   height: auto;
  14. }
  16. .overlay {
  17.   position: absolute;
  18.   top: 0;
  19.   bottom: 0;
  20.   left: 0;
  21.   right: 0;
  22.   height: 100%;
  23.   width: 100%;
  24.   opacity: 0;
  25.   transition: .5s ease;
  26.   background-color: #008CBA;
  27. }
  29. .container:hover .overlay {
  30.   opacity: 1;
  31. }
  33. .text {
  34.   color: white;
  35.   font-size: 20px;
  36.   position: absolute;
  37.   top: 50%;
  38.   left: 50%;
  39.   transform: translate(-50%, -50%);
  40.   -ms-transform: translate(-50%, -50%);
  41. }
  42. </style>
  43. </head>
  44. <body>
  46. <h2>淡入文本</h2>
  48. <div class="container">
  49.   <img src="/images/img_avatar.png" alt="Avatar" class="image">
  50.   <div class="overlay">
  51.     <div class="text">Hello World</div>
  52.   </div>
  53. </div>
  55. </body>
  56. </html>
运行一下

淡入框 代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 50%;
  8. }
  10. .image {
  11.   opacity: 1;
  12.   display: block;
  13.   width: 100%;
  14.   height: auto;
  15.   transition: .5s ease;
  16.   backface-visibility: hidden;
  17. }
  19. .middle {
  20.   transition: .5s ease;
  21.   opacity: 0;
  22.   position: absolute;
  23.   top: 50%;
  24.   left: 50%;
  25.   transform: translate(-50%, -50%);
  26.   -ms-transform: translate(-50%, -50%)
  27. }
  29. .container:hover .image {
  30.   opacity: 0.3;
  31. }
  33. .container:hover .middle {
  34.   opacity: 1;
  35. }
  37. .text {
  38.   background-color: #4CAF50;
  39.   color: white;
  40.   font-size: 16px;
  41.   padding: 16px 32px;
  42. }
  43. </style>
  44. </head>
  45. <body>
  47. <h2>淡入框</h2>
  49. <div class="container">
  50.   <img src="/images/img_avatar.png" alt="Avatar" class="image" style="width:100%">
  51.   <div class="middle">
  52.     <div class="text">John Doe</div>
  53.   </div>
  54. </div>
  56. </body>
  57. </html>
运行一下

顶部滑入 代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 50%;
  8. }
  10. .image {
  11.   display: block;
  12.   width: 100%;
  13.   height: auto;
  14. }
  16. .overlay {
  17.   position: absolute;
  18.   bottom: 100%;
  19.   left: 0;
  20.   right: 0;
  21.   background-color: #008CBA;
  22.   overflow: hidden;
  23.   width: 100%;
  24.   height: 0;
  25.   transition: .5s ease;
  26. }
  28. .container:hover .overlay {
  29.   bottom: 0;
  30.   height: 100%;
  31. }
  33. .text {
  34.   white-space: nowrap;
  35.   color: white;
  36.   font-size: 20px;
  37.   position: absolute;
  38.   overflow: hidden;
  39.   top: 50%;
  40.   left: 50%;
  41.   transform: translate(-50%, -50%);
  42.   -ms-transform: translate(-50%, -50%);
  43. }
  44. </style>
  45. </head>
  46. <body>
  48. <h2>顶部滑入</h2>
  50. <div class="container">
  51.   <img src="/images/img_avatar.png" alt="Avatar" class="image">
  52.   <div class="overlay">
  53.     <div class="text">Hello World</div>
  54.   </div>
  55. </div>
  57. </body>
  58. </html>
运行一下

底部滑入:

Avatar
Hello World

左边滑入:

Avatar
Hello World

右边滑入:

Avatar
Hello World

底部滑入 代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 50%;
  8. }
  10. .image {
  11.   display: block;
  12.   width: 100%;
  13.   height: auto;
  14. }
  16. .overlay {
  17.   position: absolute;
  18.   bottom: 0;
  19.   left: 0;
  20.   right: 0;
  21.   background-color: #008CBA;
  22.   overflow: hidden;
  23.   width: 100%;
  24.   height: 0;
  25.   transition: .5s ease;
  26. }
  28. .container:hover .overlay {
  29.   height: 100%;
  30. }
  32. .text {
  33.   white-space: nowrap;
  34.   color: white;
  35.   font-size: 20px;
  36.   position: absolute;
  37.   overflow: hidden;
  38.   top: 50%;
  39.   left: 50%;
  40.   transform: translate(-50%, -50%);
  41.   -ms-transform: translate(-50%, -50%);
  42. }
  43. </style>
  44. </head>
  45. <body>
  47. <h2>悬停时从底部滑入</h2>
  49. <div class="container">
  50.   <img src="/images/img_avatar.png" alt="Avatar" class="image">
  51.   <div class="overlay">
  52.     <div class="text">Hello World</div>
  53.   </div>
  54. </div>
  56. </body>
  57. </html>
运行一下

左边滑入 代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 50%;
  8. }
  10. .image {
  11.   display: block;
  12.   width: 100%;
  13.   height: auto;
  14. }
  16. .overlay {
  17.   position: absolute;
  18.   bottom: 0;
  19.   left: 0;
  20.   right: 0;
  21.   background-color: #008CBA;
  22.   overflow: hidden;
  23.   width: 0;
  24.   height: 100%;
  25.   transition: .5s ease;
  26. }
  28. .container:hover .overlay {
  29.   width: 100%;
  30. }
  32. .text {
  33.   white-space: nowrap;
  34.   color: white;
  35.   font-size: 20px;
  36.   position: absolute;
  37.   overflow: hidden;
  38.   top: 50%;
  39.   left: 50%;
  40.   transform: translate(-50%, -50%);
  41.   -ms-transform: translate(-50%, -50%);
  42. }
  43. </style>
  44. </head>
  45. <body>
  47. <h2>悬停时从左边滑入</h2>
  49. <div class="container">
  50.   <img src="/images/img_avatar.png" alt="Avatar" class="image">
  51.   <div class="overlay">
  52.     <div class="text">Hello World</div>
  53.   </div>
  54. </div>
  56. </body>
  57. </html>
运行一下

右边滑入 代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   position: relative;
  7.   width: 50%;
  8. }
  10. .image {
  11.   display: block;
  12.   width: 100%;
  13.   height: auto;
  14. }
  16. .overlay {
  17.   position: absolute;
  18.   bottom: 0;
  19.   left: 100%;
  20.   right: 0;
  21.   background-color: #008CBA;
  22.   overflow: hidden;
  23.   width: 0;
  24.   height: 100%;
  25.   transition: .5s ease;
  26. }
  28. .container:hover .overlay {
  29.   width: 100%;
  30.   left: 0;
  31. }
  33. .text {
  34.   white-space: nowrap; 
  35.   color: white;
  36.   font-size: 20px;
  37.   position: absolute;
  38.   overflow: hidden;
  39.   top: 50%;
  40.   left: 50%;
  41.   transform: translate(-50%, -50%);
  42.   -ms-transform: translate(-50%, -50%);
  43. }
  44. </style>
  45. </head>
  46. <body>
  48. <h2>悬停时从右边滑入</h2>
  50. <div class="container">
  51.   <img src="/images/img_avatar.png" alt="Avatar" class="image">
  52.   <div class="overlay">
  53.     <div class="text">Hello World</div>
  54.   </div>
  55. </div>
  57. </body>
  58. </html>
运行一下
CSS3 图片滤镜
CSS3 图片翻转

分类导航