css实现20款不同风格的图片悬浮弹出文字按钮效果代码-html代码-BFW代码库

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