1. 主题阁汉化首页
  2. 特效代码

鼠标悬停图片变形动画CSS3特效

鼠标悬停图片变形动画CSS3特效

这是一款 CSS3 鼠标悬停图片遮罩层变形动画特效。该特效在鼠标悬停在图片上面的时候,遮罩层会变形为半圆形,同时出现提示标题等信息。
使用方法
在 HTML 文件中引入

  1. <link rel=“stylesheet” type=“text/css” href=“css/bootstrap-grid.min.css” />
  2. <link href=“https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css” rel=“stylesheet”>

HTML 结构

  1. <div class=“demo”>
  2.     <div class=“container”>
  3.         <div class=“row”>
  4.             <div class=“col-md-4 col-sm-6”>
  5.                 <div class=“box”>
  6.                     <img  src=“images/img-1.jpg”>
  7.                     <div class=“box-content”>
  8.                         <h3 class=“title”>Williamson</h3>
  9.                         <span class=“post”>Web designer</span>
  10.                     </div>
  11.                     <ul class=“icon”>
  12.                         <li><a href=“#”><i class=“fa fa-search”></i></a></li>
  13.                         <li><a href=“#”><i class=“fa fa-link”></i></a></li>
  14.                     </ul>
  15.                 </div>
  16.             </div>
  17.             <div class=“col-md-4 col-sm-6”>
  18.                 <div class=“box”>
  19.                     <img  src=“images/img-2.jpg”>
  20.                     <div class=“box-content”>
  21.                         <h3 class=“title”>Miranda Roy</h3>
  22.                         <span class=“post”>Web developer</span>
  23.                     </div>
  24.                     <ul class=“icon”>
  25.                         <li><a href=“#”><i class=“fa fa-search”></i></a></li>
  26.                         <li><a href=“#”><i class=“fa fa-link”></i></a></li>
  27.                     </ul>
  28.                 </div>
  29.             </div>
  30.             <div class=“col-md-4 col-sm-6”>
  31.                 <div class=“box”>
  32.                     <img  src=“images/img-3.jpg”>
  33.                     <div class=“box-content”>
  34.                         <h3 class=“title”>Steve Thomas</h3>
  35.                         <span class=“post”>Web developer</span>
  36.                     </div>
  37.                     <ul class=“icon”>
  38.                         <li><a href=“#”><i class=“fa fa-search”></i></a></li>
  39.                         <li><a href=“#”><i class=“fa fa-link”></i></a></li>
  40.                     </ul>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </div>
  45. </div>

CSS 样式

  1. .demo{padding50px 0;}
  2. .box{
  3.     font-family: ‘Ubuntu’, sans-serif;
  4.     overflowhidden;
  5.     positionrelative;
  6. }
  7. .box:before{
  8.     content;
  9.     background#3498db;
  10.     width: 100%;
  11.     height: 100%;
  12.     opacity: 0;
  13.     positionabsolute;
  14.     top: 0;
  15.     left: 0;
  16.     z-index: 1;
  17.     transition: all 0.4s ease;
  18. }
  19. .box:hover:before{
  20.     height: 70%;
  21.     border-radius: 0 0 250px 250px;
  22.     box-shadow: 0 0 20px #000;
  23.     opacity: 0.9;
  24. }
  25. .box img{
  26.     width: 100%;
  27.     heightauto;
  28.     transition: all 0.45s;
  29. }
  30. .box:hover img{
  31.     opacity: 0.8;
  32.     filter: hue-rotate(180deg);
  33. }
  34. .box .box-content{
  35.     color#fff;
  36.     text-aligncenter;
  37.     width: 100%;
  38.     padding: 0 30px;
  39.     opacity: 0;
  40.     transform: translateX(-50%);
  41.     positionabsolute;
  42.     top: 25%;
  43.     left: 50%;
  44.     z-index: 1;
  45.     transition: all 0.4s ease;
  46. }
  47. .box:hover .box-content{ opacity: 1; }
  48. .box .title{
  49.     font-size23px;
  50.     font-weight: 800;
  51.     letter-spacing1px;
  52.     text-transformuppercase;
  53.     margin: 0 0 2px;
  54. }
  55. .box .post{
  56.     font-size16px;
  57.     text-transformcapitalize;
  58. }
  59. .box .icon{
  60.     padding: 0;
  61.     margin: 0;
  62.     list-stylenone;
  63.     transform: translateX(-50%);
  64.     positionabsolute;
  65.     left: 50%;
  66.     bottombottom10px;
  67. }
  68. .box .icon li{
  69.     displayinlineblock;
  70.     margin: 0 2px;
  71.     transform: translateX(-200px);
  72.     transition: all 0.4s ease;
  73. }
  74. .box .icon li:nth-child(2){ transform: translateX(200px); }
  75. .box:hover .icon li{ transform: translateX(0); }
  76. .box .icon li a{
  77.     color#fff;
  78.     background-color#3498db;
  79.     font-size14px;
  80.     text-aligncenter;
  81.     line-height30px;
  82.     height35px;
  83.     width35px;
  84.     border3px solid #fff;
  85.     displayblock;
  86.     transition: all 0.3s;
  87. }
  88. .box .icon li  a:hover{
  89.     color#3498db;
  90.     background-color#fff;
  91.     border-radius: 50%;
  92. }
  93. @media only screen and (max-width:990px){
  94.     .box { margin: 0 0 30px; }
  95. }

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,如若转载,请注明出处:https://themege.net/1336.html。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发表评论

登录后才能评论
联系我们

联系我们

在线咨询:点击这里给我发消息

邮件:themege@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部