[英]Button reveal when hovering over image
我是 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;
}
这似乎不起作用。 也许我在悬停部分做错了什么? 任何帮助将不胜感激,谢谢。
您需要将悬停 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>
干得好:
设置
container
的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.