css实现卡片悬浮图片飞出显示文字效果代码
代码语言:html
所属分类:悬停
代码描述:css实现卡片悬浮图片飞出显示文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <!--可无视--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <!--主要样式--> <style> body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } a{color: #2fa0ec;text-decoration: none;outline: none;} a:hover,a:focus{color:#74777b;} /* footer */ .footer{width: 100%;padding-top: 10px;} .small{font-size: 0.8em;} .center{text-align: center;} .mt50{margin-top: 50px;} .box{ position: relative; perspective: 1000px; } .box img{ width: 100%; height: auto; opacity:1; transform: translateY(0) rotateX(0); transition: all 0.6s ease-in-out 0s; } .box:hover img{ transform: translateY(-100%) rotateX(90deg); transform-origin:bottom center; opacity:0; } .box .over-layer{ position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; background:#333d4b; text-align:center; padding: 0 20px; transition: all 0.60s ease-in-out 0s; } .box:hover .over-layer{ opacity:1; } .box .title, .box .description, .box .social-links{ position: relative; top: 11%; color: #d3d3d3; } .box .title{ text-transform: capitalize; } .box .title:after, .box .description:after{ content:""; width: 50%; display: block; margin: 10px auto 0; border-bottom: 1px solid #fff; } .box .social-links{ padding:0; margin:0; list-style: none; } .box .social-links li{ margin: 10px; display: inline-block; } .box .social-links li a{ color: #fff; font-size: 20px; } .box .social-links li a:hover{ color: #d3d3d3; text-decoration: none; } @media only screen and (max-width: 990px){ .box{ margin-bottom:20px; } } </style> </head> <body> <div class="container"> <div class="container mt50"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt=""> <div class="over-layer"> <h3 class="title">Web designer</h3> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0