图片/图形

CSS3鼠标悬停hover图片遮罩层样式

面包多

CSS3鼠标悬停hover图片遮罩层样式-创客云
这是一款 CSS3 鼠标 hover 图片遮罩层样式。该鼠标 hover 动画在鼠标悬停到图片上面的时候,遮罩层以两个不规则图形出现,并显示描述文字和链接图标。

HTML 结构

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-4 col-sm-6">
  4.             <div class="box">
  5.                 <img src="images/img-1.jpg">
  6.                 <div class="box-content">
  7.                     <h3 class="title">Williamson</h3>
  8.                     <span class="post">Web designer</span>
  9.                     <ul class="icon">
  10.                         <li><a href="#"><i class="fa fa-search"></i></a></li>
  11.                         <li><a href="#"><i class="fa fa-link"></i></a></li>
  12.                     </ul>
  13.                 </div>
  14.             </div>
  15.         </div>
  16.         <div class="col-md-4 col-sm-6">
  17.             <div class="box">
  18.                <img src="images/img-2.jpg">
  19.                 <div class="box-content">
  20.                     <h3 class="title">Miranda Roy</h3>
  21.                     <span class="post">Web designer</span>
  22.                     <ul class="icon">
  23.                         <li><a href="#"><i class="fa fa-search"></i></a></li>
  24.                         <li><a href="#"><i class="fa fa-link"></i></a></li>
  25.                     </ul>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </div>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. .box{
  2.     font-family: 'Merriweather Sans', sans-serif;
  3.     overflow: hidden;
  4.     position: relative;
  5.     z-index: 1;
  6.     transition: all .5s;
  7. }
  8. .box:hover{ box-shadow: 3px 3px 5px #999; }
  9. .box:before,
  10. .box:after{
  11.     content: "";
  12.     background: radial-gradient(circle at 23% 70%,rgba(255,255,255,0.8),#fff 30%);
  13.     width: 150%;
  14.     height: 150%;
  15.     opacity: 0;
  16.     transform: rotate(45deg);
  17.     position: absolute;
  18.     top:-10.5%;
  19.     right:-150%;
  20.     z-index: 1;
  21.     transition: all 0.35s ease;
  22. }
  23. .box:after{
  24.     background: rgba(255,255,255,0.5);
  25.     width: 65%;
  26.     height: 65%;
  27.     right: auto;
  28.     left: -20%;
  29.     top: -65%;
  30. }
  31. .box:hover:before{
  32.     opacity: 1;
  33.     right: -85%;
  34. }
  35. .box:hover:after{
  36.     opacity: 1;
  37.     top: -42%;
  38. }
  39. .box img{
  40.     width: 100%;
  41.     height: auto;
  42.     transition: all 0.5s ease;
  43. }
  44. .box:hover img{ transform: scale(1.2); }
  45. .box .box-content{
  46.     text-align: right;
  47.     transform: translateY(-50%);
  48.     position: absolute;
  49.     top: 50%;
  50.     right: -100%;
  51.     z-index: 2;
  52.     transition: all .5s;
  53. }
  54. .box:hover .box-content{ right: 5%; }
  55. .box .title{
  56.     color: #1e272e;
  57.     font-size: 23px;
  58.     font-weight: 700;
  59.     text-transform: uppercase;
  60.     margin: 0 0 3px 0;
  61. }
  62. .box .post{
  63.     font-size: 16px;
  64.     text-transform: capitalize;
  65.     margin: 0 0 10px;
  66.     display: block;
  67. }
  68. .box .icon{
  69.     padding: 0;
  70.     margin: 0;
  71.     list-style: none;
  72. }
  73. .box .icon li{
  74.     display: inline-block;
  75.     margin: 0 4px;
  76. }
  77. .box .icon li a{
  78.     color: #fff;
  79.     background-color: #1e272e;
  80.     font-size: 18px;
  81.     text-align: center;
  82.     line-height: 35px;
  83.     height: 35px;
  84.     width: 35px;
  85.     border-radius: 50%;
  86.     display: block;
  87.     transition: all 0.3s;
  88. }
  89. .box .icon li  a:hover{
  90.     color: #1e272e;
  91.     background-color: #fff;
  92.     border-radius: 10%;
  93.     box-shadow: 0 0 5px #1e272e inset;
  94. }
  95. @media only screen and (max-width:990px){
  96.     .box { margin: 0 0 30px; }
  97. }
  98. @media only screen and (max-width:479px){
  99.     .box .title{ font-size: 20px; }
  100. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!