css实现10种不同风格的图片悬浮文字层显示动画效果代码
代码语言：html
所属分类：悬停
代码描述：css实现10种不同风格的图片悬浮文字层显示动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@import url(css.css);@import url(css1.css);@import url(css2.css);body{ background-color:#e5e9ec;}h1,h2,h3,h4,h5,h6,div,input,p,a{ font-family: "Open Sans"; margin:0px; }a,a:hover,a:focus{ color:inherit; text-decoration:none;}.container-fluid,.container { max-width: 1200px; margin:auto;}section{ padding:20px 0px;}section h1{ font-size:25px; margin-bottom:25px;}.card-desription-container{ padding: 50px;}.card-desription-container p{ padding:15px 0px; color:rgba(0,0,0,0.8);}button{ border:none; padding:13px 20px; font-weight:bold; background-color:transparent;}.card{ position:relative; overflow:hidden; border-radius:5px; cursor:pointer; box-shadow:0px 0px 20px rgba(0,0,0,0.1); margin:25px auto; max-width:300px;}.card img{ width:100%;}.card-name{ position:absolute;}.card-icons{ position:absolute;}footer{ padding:15px 0px; font-size:13px; text-align:center; background-color:rgba(0,0,0,0.2); font-weight:bold;}.card-1 img{ transition:all 0.25s ease-in-out;}.card-1 .card-name{ top:-100px; right:0px; position:absolute; color:#FFF; font-size:17px; font-weight:bold; padding:30px 50px; z-index:100; transition:all ease-in-out 0.25s;}.card-1 .card-name::before{ content:""; position:absolute; width:300px; height:300px; background-color:#002643; transform:rotate(-3deg) skew(55deg); left:-700px; top:-200px; z-index:-1; box-shadow:-35px -10px 0px 10px rgba(0,0,0,0.1); transition:all ease-in-out 0.25s; transition-delay:0.2s;}.card-1 .card-name::after{ content:""; position:absolute; width:300px; height:100px; background-color:#9ad75e; left:-200px; top:-150px; z-index:-2; transform:rotate(-20deg); box-shadow:10px 0px 0px 10px rgba(0,0,0,0.1); transition:all ease-in-out 0.25s; transition-delay:0.4s;}.card-1 .card-icons{ position:absolute; bottom:-100px; left:0px; color:#FFF; padding:10px 20px; z-index:2; transition:all ease-in-out 0.25s;}.card-1 .card-icons .fa{ margin:0px 5px;}.card-1 .card-icons::before{ content:""; position:absolute; width:250px; height:200px; background-color:#032a47; z-index:-1; transform:rotate(15deg) skew(-25deg); top:100px; left:-40px; box-shadow:-30px 20px 0px 10px rgba(0,0,0,0.1); transition:all ease-in-out 0.25s; transition-delay:0.2s; }.card-1 .card-icons::after{ content:""; position:absolute; width:350px; height:200px; background-color:#0093a7; z-index:-2; top:100px; left:0px; border-top:10px solid rgba(255,255,255,1); transform:rotate(-10deg); transition:all ease-in-out 0.25s; transition-delay:0.4s;}.card-1 .card-icons .fa:hover{ color:#9ad75e;}.card-1:hover img{ filter:brightness(75%); transform:scale(1.1,1.1) rotate(-5deg);}.card-1:hover .card-name{ top:10px;}.card-1:hover .card-name::before{ left:-150px;}.card-1:hover .card-name::after{ top:-50px;}.card-1:hover .card-icons{ bottom:0px;}.card-1:hover .card-icons::before{ top:-10px;}.card-1:hover .card-icons::after{ top:0px; transform:rotate(-15deg)}.card-2 img{ transition:all 0.25s ease-in-out;}.card-2 .card-name{ position:absolute; bottom:30px; left:0px; font-size:20px; font-weight:bold; padding:10px 30px; z-index:2; color:#FFF; transition:all ease-in-out 0.25s; opacity:0;}.card-2 .card-name::before{ content:""; position:absolute; background-color:#1a797f; opacity:0.8; z-index:-1; left:-500px; top:-10px; bottom:-10px; right:250px; transform:skew(-40deg); box-shadow:20px 25px 0px 10px rgba(0,0,0,0.5); transition:all ease-in-out 0.25s; transition-delay:0.2s;}.card-2 .card-name::after{ content:""; position:absolute; background-color:rgba(255,255,255,1); z-index:-2; top:-50px; right:-550px; width:300px; height:200px; transform:rotate(-45deg); transition:all ease-in-out 0.25s; transition-delay:0.4s;}.card-2 .card-icons{ top:0px; right:-100px; background-color:#2c3441; color:#FFF; padding:5px 0px; z-index:2; transition:all ease-in-out 0.25s; transition-delay:0.2s;}.card-2 .card-icons .fa{ display:block; margin:15px; text-align:center;}.card-2 .card-icons::before{ content:""; position:absolute; width:100px; top:-5px; left:-7px; bottom:0px; background-color:#2c3441; z-index:-1; transition:all ease-in-out 0.25s; transition-delay:0.4s;}.card-2 .card-icons .fa:hover{ color:#1a797f;}.card-2:hover img{ filter:brightness(75%); transform:scale(1.1,1.1) rotate(5deg);}.card-2:hover .card-name{ opacity:1;}.card-2:hover .card-name::before{ left:-40px; right:-25px;}.card-2:hover .card-name::after{ right:-250px;}.card-2:hover .card-icons{ right:0px;}.card-2:hover .card-icons::before{ transform:rotate(-5deg)}.card-3 img{ transition:all 0.25s ease-in-out; z-index:0;}.card-3::before{ content:""; position:absolute; width:10px; background-color:rgba(255,255,255,1); border-right:30px solid #e29f1a; top:0px; bottom:calc(50%); transform:skew(-25deg); left:-300px; width:200px; box-shadow:10px -20px 0px 20px rgba(0,0,0,0.5); transition:all 0.25s ease-in-out;}.card-3::after{ content:""; position:absolute; background-color:rgba(255,255,255,1); width:10px; border-right:30px solid #e29f1a; bottom:0px; top:calc(50%); transform:skew(25deg); left:-300px; width:200px; box-shadow:10px 20px 0px 20px rgba(0,0,0,0.5); transition:all 0.25s ease-in-out;}.card-3 .card-name{ bottom:0px; right:-200px; left:calc(100%); padding:25px; background-color:#001219; color:#e29f1a; font-weight:bold; text-align:right; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-3 .card-name:before{ content:""; position:absolute; height:100%; width:50px; background-color:#001219; left:20px; top:0px; transform:skew(-30deg); transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-3 .card-icons{ top:10px; left:-30px; transition:all 0.25s ease-in-out; transition-delay:0.4s; }.card-3 .card-icons .fa{ display:block; padding:5px; width:24px; text-align:center; z-index:5;}.card-3 .card-icons .fa:hover{ color:#e29f1a;}.card-3:hover img{ margin-left:50px; }.card-3:hover::before,.card-3:hover::after{ left:-100px;}.card-3:hover .card-name{ left:0px; right:0px;}.card-3:hover .card-name:before{ left:-20px;}.card-3:hover .card-icons{ left:10px;}.card-4 img{ transition:all 0.25s ease-in-out;}.card-4::before{ position:absolute; content:""; width:150px; left:-250px; height:25px; background-color:#0b8dcb; transform:skew(30deg); box-shadow:-50px 10px 0px 10px rgba(0,0,0,0.5); z-index:4; transition:all 0.25s ease-in-out; }.card-4::after{ position:absolute; content:""; right:-300px; bottom:20px; padding:30px; width:250px; background-color:#0b8dcb; opacity:0.9; transform:skew(30deg); box-shadow:-25px 40px 0px 20px rgba(0,0,0,0.5); transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-4 .card-name{ top:calc(40%); left:0px; right:0px; text-align:center; color:#FFF; font-weight:bold; font-size:21px; padding:10px 0px; background-color:rgba(0,0,0,0.2); transform:scale(0,0); transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-4 .card-icons{ bottom:40px; right:20px; z-index:7; transform:scale(0,0); transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-4 .card-icons .fa{ margin:0px 10px; color:#fff;}.card-4:hover img{ filter:blur(2px) brightness(70%); transform:scale(1.1,1.1);}.card-4:hover::before{ left:-20px; }.card-4:hover::after{ right:-50px;}.card-4:hover .card-name{ transform:scale(1,1);}.card-4:hover .card-icons{ transform:scale(1,1); }.card-5 img{ transition:all 0.25s ease-in-out;}.card-5::before{ content:""; position:absolute; top:calc(150%); left:-200px; right:-200px; bottom:-100px; background-color:#263751; transform:rotate(30deg); box-shadow:10px -10px 0px 10px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out;}.card-5::after{ content:""; position:absolute; background-color:#fccc3a; height:calc(50%); bottom:0px; left:calc(150%); right:-100px; transform:rotate(-30deg) skew(30deg); transition:all 0.25s ease-in-out; transition-delay:0.2s; }.card-5 .card-name{ left:-200px; bottom:50px; color:#FFF; font-size:17px; font-weight:bold; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-5 .card-name span{ color:#fccc3a;}.card-5 .card-icons{ bottom:20px; left:-200px; color:#FFF; transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-5 .card-icons .fa{ margin-right:10px;}.card-5 .card-icons .fa:hover{ color:#fccc3a;}.card-5:hover img{ }.card-5:hover::before{ top:calc(75%);}.card-5:hover::after{ left:calc(85%);}.card-5:hover .card-name{ left:20px;}.card-5:hover .card-icons{ left:20px;}.card-6 img{ transition:all 0.25s ease-in-out; z-index:-2;}.card-6::before{ content:""; position:absolute; background-color:#1793b9; opacity:0.9; bottom:110px; left:-125px; height:25px; width:100px; z-index:1; transform:skew(-45deg); transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-6::after{ content:""; position:absolute; bottom:-100px; height:100px; background-color:#FFF; left:0px; right:0px; transition:all 0.25s ease-in-out;}.card-6 .card-name{ left:-250px; bottom:30px; padding:25px; color:#FFF; z-index:5; font-weight:bold; font-size:18px; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-6 .card-name::before{ content:""; position:absolute; left:-500px; width:200px; height:100px; background-color:#004c8c; z-index:-1; top:0px; transform:skew(-45deg); box-shadow:10px 10px 0px 10px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out;}.card-6 .card-name::after{ content:""; position:absolute; left:-150px; width:120px; height:60px; background-color:#004c8c; z-index:-2; top:-20px; transform:skew(-45deg); box-shadow:10px 10px 0px 10px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out; transition-delay:0.6s;}.card-6 .card-icons{ bottom:-50px; right:10px; z-index:3; transition:all 0.25s ease-in-out; transition-delay:0.4s;}.card-6 .card-icons .fa{ margin-left:5px; color:#1793b9;}.card-6 .card-icons .fa:hover{ color:#004c8c;}.card-6:hover img{ filter:brightness(50%);}.card-6:hover::after{ bottom:0px;}.card-6:hover::before{ left:25px;}.card-6:hover .card-name{ left:10px;}.card-6:hover .card-name::before{ left:-50px;}.card-6:hover .card-icons{ bottom:10px;}.card-6:hover .card-name::after{ left:100px;}.card-7 img{ transition:all 0.25s ease-in-out; z-index:1;}.card-7::before{ content:""; position:absolute; bottom:-100px; left:0px; right:0px; height:100px; background: linear-gradient(30deg, #49515c, #232c35); z-index:2; transition:all 0.25s ease-in-out;}.card-7::after{ content:""; position:absolute; height:25px; background-color:#e85a23; bottom:90px; left:calc(150%); right:-100px; z-index:3; transform:skew(-45deg); box-shadow:-10px 10px 0px 5px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out; transition-delay:0.1s;}.card-7 .card-name{ bottom:40px; left:-300px; z-index:3; color:#FFF; font-weight:bold; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-7 .card-name::before{ content:""; position:absolute; left:-50px; bottom:-10px; right:-30px; top:-10px; background-color:rgba(0,0,0,0.2); z-index:1; transform:skew(-45deg);}.card-7 .card-icons{ bottom:-30px; right:10px; z-index:3; transition:all 0.25s ease-in-out; transition-delay:0.3s;}.card-7 .card-icons .fa{ padding:5px; background-color:rgba(255,255,255,0.2); color:#e85a23; color:#FFF; width:24px; text-align:center; margin-left:5px; border-radius:50%;}.card-7:hover img{ filter:brightness(80%); margin-bottom:50px; margin-top:-50px;}.card-7:hover::before{ bottom:0px;}.card-7:hover::after{ left:calc(50%);}.card-7:hover .card-name{ left:20px;}.card-7:hover .card-icons{ bottom:10px;}.card-8 img{ transition:all 0.25s ease-in-out; z-index:1;}.card-8::before{ content:""; position:absolute; background-color:#231f20; top:-150px; left:-10px; right:-50px; height:90px; transform:rotate(10deg) skew(-10deg); border-right:100px solid #cdd51f; z-index:2; transition:all 0.25s ease-in-out;}.card-8::after{ content:""; position:absolute; bottom:-150px; height:80px; background-color:#FFF; left:-15px; right:-15px; transform:rotate(10deg); z-index:2; transition:all 0.25s ease-in-out;}.card-8 .card-name{ right:75px; top:-50px; color:#FFF; font-weight:bold; font-size:18px; z-index:5; transition:all 0.25s ease-in-out; transition-delay:0.2s; }.card-8 .card-icons{ bottom:-150px; left:5px; z-index:4; background-color:#cdd51f; color:#231f20; padding:10px 25px; transform:rotate(10deg); transition:all 0.25s ease-in-out; transition-delay:0.3s;}.card-8 .card-icons .fa{ margin-right:5px;}.card-8 .card-icons::after{ content:""; position:absolute; right:-15px; top:5px; border:15px solid transparent; border-right-color:rgba(0,0,0,0.5); z-index:1; transform:rotate(-45deg);}.card-8:hover img{ transform:rotate(10deg) scale(1.2,1.2); filter:brightness(50%);}.card-8:hover::before{ top:-20px;}.card-8:hover::after{ bottom:-50px;}.card-8:hover .card-name{ top:10px;}.card-8:hover .card-icons{ bottom:25px;}.card-9 img{ transition:all 0.25s ease-in-out; z-index:1;}.card-9::before{ content:""; position:absolute; left:-500px; bottom:-250px; top:calc(50%); width:320px; background-color:rgba(0,0,0,0.9); background-color:#323232; transform:rotate(0deg); z-index:2; transition:all 0.25s ease-in-out; transition-delay:0.2s;}.card-9::after{ content:""; position:absolute; right:-400px; bottom:-250px; top:0px; width:320px; background-color:#2ec17b; transform:rotate(0deg); z-index:1; box-shadow:-30px 0px 0px 30px rgba(0,0,0,0.2); transition:all 0.25s ease-in-out;}.card-9 .card-name{ left:-500px; bottom:20px; z-index:6; color:#FFF; font-weight:bold; font-size:20px; transition:all 0.25s ease-in-out; transition-delay:0.3s;}.card-9 .card-icons{ bottom:20px; right:20px; z-index:6; transition:all 0.25s ease-in-out; transform:scale(0,0); transition-delay:0.3s;}.card-9 .card-icons .fa{ display:block; margin:5px 0px; padding:5px; width:24px; text-align:center; color:#FFF; }.card-9:hover img{ margin-bottom:50px; margin-top:-50px; filter:brightness(80%);}.card-9:hover::before{ left:-150px; transform:rotate(-50deg);}.card-9:hover .card-name{ left:20px;}.card-9:hover::after{ right:-200px; transform:rotate(25deg);}.card-9:hover .card-icons{ transform:scale(1,1);}.card-10 img{ transition:all 0.25s ease-in-out; z-index:1;}.card-10::before{ content:""; position:absolute; background-color:#de2431; opacity:0.3; left:-250px; top:0px; width:250px; bottom:0px; z-index:1; transform:skew(0deg); transition:all 0.25s ease-in-out;}.card-10::after{ content:""; position:absolute; height:100px; left:0px; right:0px; bottom:-100px; z-index:2; background-color:#FFF; transition:all 0.25s ease-in-out;}.card-10 .card-name{ color:#000; bottom:20px; left:20px; z-index:5; font-weight:bold; font-size:20px; transition:all 0.25s ease-in-out; transition-delay:0.2s; transform:scale(1,0); }.card-10 .card-name span{ color:#de2431;}.card-10 .card-icons{ bottom:80px; right:-300px; z-index:5; transition:all 0.25s ease-in-out; transition-delay:0.3s;}.card-10 .card-icons .fa{ margin:0px 5px; color:#FFF;}.card-10 .card-icons::before{ position:absolute; content:""; top:-25px; left:-50px; right:-100px; bottom:-25px; background-color:#de2431; z-index:-1; transform:skew(-40deg);}.card-10 .card-icons::after{ position:absolute; content:""; left:-100px; top:0px; bottom:-25px; background-color:#961728; width:100px; transform:skew(40deg); z-index:-2; box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);}.card-10:hover img{ filter:brightness(70%);}.card-10:hover::before{ left:-250px; transform:skew(-30deg);}.card-10:hover::after{ bottom:0px;}.card-10:hover .card-name{ transform:scale(1,1);}.card-10:hover .card-icons{ right:20px;}
</style>
</head>
<body>
<section style="background-color:rgba(255,255,255,0.1);">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-3 ">
<div class="card card-1"><img src="//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png" class="img img-responsive">
<div class="card-name">John Doe</div>
<div class="card-icons"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-linkedin"></i></a><a href="#"><i class="fa fa-rss"></i></a></div>
</div>
</div>
<div class="col-sm-9 col-md-9 hidden-xs">
<div class="card-desription-container">
<h1><strong>Demo 1</strong></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore edolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
takimata sanctus est ipsum dolor.</p>
<p>Quisque non tincidunt ipsum, maximus cursus tellus. Ut molestie lorem metus, vitae posuere tortor tempor in. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p><button><i class="fa fa-arrow-left"></i> HOVER ME !</button></div>
</div>
</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0