如何添加一个按钮时，图像悬停即点击？

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>