bootstrap之鼠标滑动显示文字+三个图并列

最新推荐文章于 2023-12-15 22:27:51 发布

鲸鱼姐

最新推荐文章于 2023-12-15 22:27:51 发布

阅读量1.5k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/102880280

版权

bootstrap 同时被 2 个专栏收录

42 篇文章 7 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

一. 效果

正常显示如下：

当鼠标滑动到图片，显示如下：

二 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <link href="app2.css" rel="stylesheet">
</head>
<body>
    <div class="twopage">
        <div class="twopage-text">
            <h1 class="twopage-text-h1">
                daily life<img src="img/11.png">
            </h1>
        </div>
        <div class="row">
            <div class="twopage-course col-md-4">
                <a href="#">
                    <img src="img/2.png" style="width:100%">
                    <div class="classicon">
                        <h3>认真学习</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-course col-md-4">
                <a href="#">
                    <img src="img/3.png" style="width:100%">
                    <div class="classicon">
                        <h3>认真学习</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
            <div class="twopage-course col-md-4">
                <a href="#">
                    <img src="img/4.png" style="width:100%">
                    <div class="classicon">
                        <h3>认真学习</h3>
                        <h1><strong>学习这个课程</strong></h1>
                    </div>
                </a>
            </div>
        </div>
        <div class="twopagebtn">
            <a id="twopage-easy" href="#" class="btn btn-success btn-lg">如果你想学习，快快点击这里</a>
        </div>
    </div>
</body>
</html>

三 app2.css代码

.twopage{
    padding:2px 0 0 2px;
    height:auto;
    background-image:url("");
    position: relative;
}
.twopage-text{
    width: 100%;
    text-align: center;
}

.twopage-text-h1{
    margin-left:120px;
    letter-spacing: 2px;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 20px 0 0 0;
}

.twopage-text-h1 img{
    width:120px;
    margin-top:-20px;
}

.twopage .row{
    margin-right:0px;
    margin-left:0px;
}

.twopage-course{
    float:left;
    background:#ffffff;
    padding:0 2px 2px 0;
    position: relative;
    overflow:hidden;
}
.twopage-course >a{
    width:100%;
    height:100%;
    float:left;
    text-align:center;
    position: relative;
}


.classicon h3{
    margin-top:120px;
    color:#d1e973;
}
.classicon h1{
    color:#a19d96;
}

.classicon{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    color:#fff;
    opacity: 0;
}

.classicon:hover{
    background:#1eb450;
    opacity: 0.9;
    transition:opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}

.twopagebtn{
    width:100%;
    margin:0% auto;
    text-align:center;
}

.twopagebtn .btn-lg{
    font-size:25px;
}

#twopage-easy{
    margin:50px 0;
    margin-bottom: 150px;
}