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 {
top:calc(20%);
}
.thumb-4:hover .thumb-icons {
bottom:calc(20%);
}
.thumb-5 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-5 img {
transition:all 0.25s linear;
}
.thumb-5:hover img {
transform:scale(1.5,1.5);
}
.thumb-5 .thumb-icons {
position:absolute;
left:0px;
right:0px;
bottom:-50px;
background-color:rgba(255,255,255,0.8);
padding:10px 15px;
text-align:center;
font-weight:bold;
transition:all 0.25s linear;
}
.thumb-5:hover .thumb-icons {
bottom:0px;
}
.thumb-6 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-6 .fa {
position:absolute;
background-color:#FFF;
left:-44px;
padding:10px;
width:34px;
text-align:center;
border-radius:50%;
transition:all 0.25s linear;
}
.thumb-6 .social-1 {
top:5px;
transition-delay:0s;
}
.thumb-6 .social-2 {
top:45px;
transition-delay:0.1s;
}
.thumb-6 .social-3 {
top:85px;
transition-delay:0.2s;
}
.thumb-6 .social-4 {
top:125px;
transition-delay:0.3s;
}
.thumb-6:hover .fa {
left:10px;
}
.thumb-7 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-7 .thumb-icons {
position:absolute;
padding:10px;
top:calc(50%);
font-weight:bold;
left:0px;
right:0px;
text-align:center;
transform:rotateX(90deg);
transition:all 0.25s linear;
}
.thumb-7 .fa {
background-color:#FFF;
padding:10px;
width:34px;
border-radius:2px;
}
.thumb-7:hover .thumb-icons {
transform:rotateX(0deg);
}
.thumb-8 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-8:hover img {
animation:flash 1s;
}
@keyframes flash {
0% {
opacity:0.1;
}
100% {
opacity:1;
}
}.thumb-8 .thumb-icons {
position:absolute;
top:calc(40%);
left:0px;
right:0px;
text-align:center;
}
.thumb-8 .thumb-icons .fa {
padding:10px;
background-color:rgba(255,255,255,0.8);
width:34px;
border-radius:50%;
opacity:0;
transition:all 0.25s linear;
transition-delay:0.1s;
}
.thumb-8:hover .fa {
opacity:1;
}
.thumb-9 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-9 .thumb-content {
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
text-align:center;
background-color:rgba(0,0,0,0.5);
font-weight:bold;
color:#FFF;
padding:20px 10px;
transform:rotateY(90deg);
transition:all 0.25s linear;
}
.thumb-9 .thumb-content p {
font-weight:normal;
padding:10px;
font-size:13px;
}
.thumb-9:hover .thumb-content {
transform:rotateY(0deg);
}
.thumb-10 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-10 .thumb-content {
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
text-align:center;
background-color:rgba(0,0,0,0.5);
font-weight:bold;
color:#FFF;
padding:20px 10px;
transform:rotateX(90deg);
transition:all 0.25s linear;
}
.thumb-10 .thumb-content p {
font-weight:normal;
padding:10px;
font-size:13px;
}
.thumb-10:hover .thumb-content {
transform:rotateX(0deg);
}
.thumb-11 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-11 .thumb-content {
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
text-align:center;
background-color:rgba(0,0,0,0.5);
font-weight:bold;
color:#FFF;
padding:20px 10px;
transform:scale(0,0);
transition:all 0.25s linear;
}
.thumb-11 .thumb-content p {
font-weight:normal;
padding:10px;
font-size:13px;
}
.thumb-11:hover .thumb-content {
transform:scale(1,1);
}
.thumb-12 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-12 .thumb-content {
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
text-align:center;
background-color:rgba(0,0,0,0.5);
font-weight:bold;
color:#FFF;
padding:20px 10px;
transform:scale(0,0) rotate(0deg);
transition:all 0.25s linear;
}
.thumb-12 .thumb-content p {
font-weight:normal;
padding:10px;
font-size:13px;
}
.thumb-12:hover .thumb-content {
transform:scale(1,1) rotate(360deg);
}
.thumb-13 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-13 .thumb-bg {
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:rgba(255,255,255,0.9);
transform:scale(0,0);
transition:all 0.25s linear;
}
.thumb-13:hover .thumb-bg {
transform:scale(1,1);
}
.thumb-13 .thumb-name {
position:absolute;
top:-100px;
left:0px;
right:0px;
padding:10px;
font-weight:bold;
text-align:center;
transition:all 0.25s linear;
transition-delay:0.20s;
color:#000;
}
.thumb-13:hover .thumb-name {
top:20px;
}
.thumb-13 .thumb-content {
padding:10px 15px;
text-align:center;
font-size:13px;
position:absolute;
left:0px right:0px;
top:500px;
transition:all 0.25s linear;
transition-delay:0.25s;
}
.thumb-13:hover .thumb-content {
top:50px;
}
.thumb-14 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-14::before {
content:"";
position:absolute;
z-index:10;
background-color:rgba(255,255,255,0.7);
top:0px;
left:0px;
width:0px;
height:0px;
transition:all 0.25s linear;
}
.thumb-14:hover::before {
height:calc(100%);
width:calc(100%);
}
.thumb-14::after {
content:"";
position:absolute;
z-index:10;
background-color:rgba(255,255,255,0.7);
right:0px;
bottom:0px;
width:0px;
height:0px;
transition:all 0.25s linear;
}
.thumb-14:hover::after {
height:calc(100%);
width:calc(100%);
}
.thumb-14 .thumb-content {
position:absolute;
top:0px;
left:0px;
right:0px;
text-align:center;
z-index:100;
font-weight:bold;
padding:20px 15px;
transition:all 0.25s linear;
transition-delay:0.25s;
transform:scale(0,0);
}
.thumb-14 .thumb-content p {
font-size:13px;
font-weight:normal;
padding:15px;
}
.thumb-14:hover .thumb-content {
transform:scale(1,1);
}
.thumb-15 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-15::before {
content:"";
position:absolute;
z-index:10;
background-color:rgba(255,255,255,0.9);
top:0px;
left:0px;
right:0px;
height:0px;
transition:all 0.25s linear;
}
.thumb-15:hover::before {
height:calc(50%);
}
.thumb-15::after {
content:"";
position:absolute;
z-index:10;
background-color:rgba(255,255,255,0.9);
right:0px;
left:0px;
bottom:0px;
height:0px;
transition:all 0.25s linear;
}
.thumb-15:hover::after {
height:calc(50%);
}
.thumb-15 .thumb-content {
position:absolute;
top:0px;
left:0px;
right:0px;
text-align:center;
z-index:100;
font-weight:bold;
padding:20px 15px;
transition:all 0.25s linear;
transition-delay:0.25s;
transform:scale(0,0);
}
.thumb-15 .thumb-content p {
font-size:13px;
font-weight:normal;
padding:15px;
}
.thumb-15:hover .thumb-content {
transform:scale(1,1);
}
.thumb-16 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-16::before {
content:"";
position:absolute;
z-index:10;
background-color:rgba(255,255,255,0.9);
top:-133px;
left:-1000px;
right:-100px;
height:200px;
transition:all 0.25s linear;
transform:rotate(-33deg);
}
.thumb-16:hover::before {
left:-100px;
}
.thumb-16::after {
content:"";
position:absolute;
z-index:10;
background-color:rgba(255,255,255,0.9);
right:-1000px;
left:-100px;
bottom:-132px;
height:200px;
transition:all 0.25s linear;
transform:rotate(-33deg);
}
.thumb-16:hover::after {
right:-100px;
}
.thumb-16 .thumb-content {
position:absolute;
top:0px;
left:0px;
right:0px;
text-align:center;
z-index:100;
font-weight:bold;
padding:20px 15px;
transition:all 0.25s linear;
transition-delay:0.25s;
transform:scale(0,0);
}
.thumb-16 .thumb-content p {
font-size:13px;
font-weight:normal;
padding:15px;
}
.thumb-16:hover .thumb-content {
transform:scale(1,1);
}
.thumb-17 {
border:5px solid #FFF;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
position:relative;
overflow:hidden;
cursor:pointer;
}
.thumb-17 img {
transition:all 0.25s linear;
}
.thumb-17 .thumb-content {
position:absolute;
top:0px;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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