Как добавить кнопку, которую можно нажимать, когда изображение наведено? - PullRequest
Новая
       6

Как добавить кнопку, которую можно нажимать, когда изображение наведено?

0 голосов
/ 09 февраля 2019

Я хочу добавить кнопку к своим изображениям, когда наведу на них курсор, чтобы затем люди могли перейти на другую страницу.В настоящее время мне удалось добавить затемнение на изображение, когда оно наведено, но я хочу добавить кнопку тоже.Любая помощь будет оценена.Хорошего дня

Я добавил затемнение при наведении, но не знаю, с чего начать при добавлении кнопки при наведении 

    .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>

Я хочу иметь возможность добавить кнопку, которая позволяет людям посещать разные веб-страницы при наведении курсора на изображение

1 Ответ

0 голосов
/ 09 февраля 2019

Для создания наложений я бы рекомендовал использовать элемент вместо 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>
...