Кнопка показа при наведении на изображение - PullRequest
Новая
       2

Кнопка показа при наведении на изображение

1 голос
/ 30 марта 2020

Я новичок в css и пытаюсь реализовать функциональность на моем изображении, которая заключается в том, что, когда кто-то наводит курсор мыши на изображение, появляется кнопка «Подробнее». Вот код, который я имею до сих пор -

HTML - 

<div class="container"> 
   <img src="./images/pairingo.png">
   <div class="button"><a href="#">READ MORE</a></div>   
</div>

CSS - 

.container{
    position: relative;
    margin-top: 20px;
}

.container .button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

img{
     width:40%;
     height:40%
}

img:hover .button{
    opacity:1;
}

Это не похоже на работу. Может быть, я делаю что-то не так с парящей частью? Любая помощь будет оценена спасибо.

Ответы [ 2 ]

1 голос
/ 30 марта 2020

Здесь вы go:

Установите свойства container s top и left, чтобы сделать вашу кнопку видимой в любом месте. 

.container{
    position: relative;
    margin-top: 20px;
}

.container .button {
    position: absolute;
    top: 10%;
    left: 20%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

img{
     width:80px;
     height:80px;
}

.container:hover .button{
    opacity:1;
}
<div class="container"> 
   <img src="http://placekitten.com/301/301">
   <div class="button"><a href="#">READ MORE</a></div>   
</div>
1 голос
/ 30 марта 2020

Вам нужно добавить hover css в класс .container. Потому что img является потомком класса .container, а .button не является потомком img.

Попробуйте это. 

.container{
    position: relative;
    margin-top: 20px;
    width: 300px;
    height: 300px;
}

.container .button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    opacity: 0;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: opacity .5s;
}

img{
     width:100%;
}

.container:hover .button{
    opacity:1;
}
<div class="container"> 
   <img src="https://placehold.it/300x300/ccc/666?text=" class="img-responsive" alt="">
   <div class="button"><a href="#">READ MORE</a></div>   
</div>
...