css实现10种不同风格的图片悬浮文字层显示动画效果代码-html代码-BFW代码库

代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看