Question

当我将鼠标悬停在图像上时，我想为其添加按钮，以便人们可以访问另一个页面。目前，我已经设法在图像上添加了变暗效果，但是我也想添加一个按钮。任何帮助，将不胜感激。祝你有美好的一天

我在悬停上添加了一个变暗，但不知道从哪里开始在悬停上添加一个按钮

    .insta div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    float: right;
    display: inline-block;
    }

    .insta img{
     width: 88%;
     max-width: 100%;
     }
     .insta img:hover{
     -webkit-filter: brightness(50%);
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 05s ease;
     -o-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     transition: all 0.5s ease;
     }

    <div class="insta">
          <div class="wrapper">
          <div class="big1">
            <img src="insta/insta2.jpg">
          </div>
          <div class="big2">
            <img src="insta/insta3.jpg">
          </div>
          <div class="big3">
            <img src="insta/insta4.jpg">
          </div>
          <div class="big3">
            <img src="insta/insta5.jpg">
          </div>
          <div class="big3">
            <img src="insta/insta6.jpg">
          </div>
          <div class="big3">
            <img src="insta/insta7.jpg">
          </div>
        </div>

我希望能够添加一个按钮，使人们将鼠标悬停在图片上时可以访问其他网页

Answer 1

对于创建叠加层，由于浏览器支持较低，我建议使用元素而不是filter。

下面是我创建的一个示例，以向您展示如何完成此操作。基本上，将div（.overlay）放置在图像上方，当将图像父对象悬停时，将显示叠加层。该按钮（以及其他任何内容）将添加到叠加层内部。

.insta .wrapper{
    text-align:center;
}
.insta .wrapper .big {
    width:45%;
    display: inline-block;
    position:relative;
    margin:10px;
}

.insta img {
    width: 100%;
    max-width: 100%;
}

.insta .big .overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    top:0;
    left:0;
    opacity:0;
    transition:opacity .5s;
}

.insta .big .overlay .button{
    position:absolute;
    bottom:10px;
    width:30%;
    left:0;
    right:0;
    margin:auto;
    background:#b39ddb;
    border-radius:15px;
    padding:5px 15px;
}

.insta .big:hover .overlay{
    opacity:1;
}

<div class="insta">
    <div class="wrapper">
        <div class="big big1">
            <img src="https://placeimg.com/300/300/nature/sepia?id=1">
            <div class="overlay">
                <div class="button">  
                Button
                </div>
            </div>
        </div>
        <div class="big big2">
            <img src="https://placeimg.com/300/300/nature/sepia?id=2">
            <div class="overlay">
                <div class="button">   
                 Button
                </div>
            </div>
        </div>
        <div class="big big3">
            <img src="https://placeimg.com/300/300/nature/sepia?id=3">
            <div class="overlay">
                <div class="button">  
                 Button
                </div>
            </div>
        </div>
        <div class="big big3">
            <img src="https://placeimg.com/300/300/nature/sepia?id=4">
            <div class="overlay">
                <div class="button">
                 Button
                </div>
            </div>
        </div>
        <div class="big big3">
            <img src="https://placeimg.com/300/300/nature/sepia?id=5">
            <div class="overlay">
                <div class="button">  
                 Button
                </div>
            </div>
        </div>
        <div class="big big3">
            <img src="https://placeimg.com/300/300/nature/sepia?id=6">
            <div class="overlay">
                <div class="button">  
                 Button
                </div>
            </div>
        </div>
    </div>
</div>

如何将鼠标悬停在图像上时添加可单击的按钮？

1 个答案: