css实现20款不同风格的图片悬浮弹出文字按钮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现20款不同风格的图片悬浮弹出文字按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>THUMBS | IMAGE HOVER EFFECTS</title>
<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.4.3.1.min.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;
}
header {
background-color:#FFF;
padding:25px 0px;
margin-bottom:25px;
}
header ul {
list-style:none;
margin:10px 0px;
padding:0px;
}
header ul li {
float:left;
font-size:11px;
background-color:#e5e9ec;
padding:5px 10px;
margin-right:5px;
margin-bottom:5px;
}
.col-md-3 {
margin-top:15px;
margin-bottom:15px;
}
.thumb-icons .fa {
margin:0px 5px;
}
footer {
padding:10px 0px;
margin-top:30px;
background-color:#FFF;
font-size:13px;
font-weight:bold;
}
pre {
text-align:left;
margin:25px 0px;
background-color:#FFF;
padding:0px 20px;
border-radius:5px;
border:none;
}
pre xmp {
margin:0px;
padding:0px;
}
iframe {
clear:both;
width:100%;
max-width:740px;
border:none;
margin:10px 0px;
}
.preview {
padding:10px 25px;
background-color:#FFF;
margin:15px 0px;
}
.thumb-1 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-1 img {
transition:all 0.25s linear;
}
.thumb-1:hover img {
filter:brightness(75%);
}
.thumb-1 .thumb-name {
position:absolute;
top:10px;
background-color:rgba(255,255,255,0.8);
font-weight:bold;
padding:10px;
left:-200px;
transition:all 0.25s linear;
}
.thumb-1:hover .thumb-name {
left:0px;
}
.thumb-1 .thumb-icons {
text-align:center;
position:absolute;
padding:10px 15px;
background-color:rgba(255,255,255,0.8);
bottom:10px;
transition:all 0.25s linear;
right:-250px;
}
.thumb-1:hover .thumb-icons {
right:0px;
}
.thumb-2 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-2 img {
transition:all 0.25s linear;
}
.thumb-2:hover img {
filter:grayscale(100%);
}
.thumb-2 .thumb-name {
position:absolute;
top:-50px;
left:0px;
right:0px;
background-color:rgba(255,255,255,0.8);
font-weight:bold;
padding:10px;
transition:all 0.25s linear;
}
.thumb-2:hover .thumb-name {
top:0px;
}
.thumb-2 .thumb-icons {
text-align:center;
position:absolute;
bottom:-50px;
left:0px;
right:0px;
background-color:rgba(255,255,255,0.8);
font-weight:bold;
padding:10px;
transition:all 0.25s linear;
transition-delay:0.1s;
}
.thumb-2:hover .thumb-icons {
bottom:0px;
}
.thumb-3 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-3 img {
transition:all 0.25s linear;
}
.thumb-3 .thumb-icons {
text-align:center;
position:absolute;
top:0px;
bottom:0px;
right:0px;
width:50px;
background-color:rgba(255,255,255,0.8);
font-weight:bold;
padding:10px;
transition:all 0.25s linear;
z-index:-1;
}
.thumb-3 .thumb-icons .fa {
display:block;
margin-top:15px;
}
.thumb-3:hover img {
margin-left:-50px;
margin-right:50px;
}
.thumb-4 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-4 img {
transition:all 0.25s linear;
}
.thumb-4:hover img {
filter:blur(5px) brightness(80%);
}
.thumb-4 .thumb-name {
position:absolute;
left:0px;
right:0px;
top:-100px;
background-color:rgba(255,255,255,0.8);
padding:10px 15px;
text-align:center;
font-weight:bold;
transition:all 0.25s linear;
}
.thumb-4 .thumb-icons {
position:absolute;
left:0px;
right:0px;
bottom:-100px;
background-color:rgba(255,255,255,0.8);
padding:10px 15px;
text-align:center;
font-weight:bold;
transition:all 0.25s linear;
}
.thumb-4:hover .thumb-name {
to.........完整代码请登录后点击上方下载按钮下载查看
网友评论0