[英]Bootstrap btn-primary appear on hover
I think this should be relatively easy to do but I just can't get it to work. 我认为这应该相对容易实现,但是我无法使其正常工作。 I have my btn centered nicely over my image using display flex. 我使用display flex将btn很好地居中放置在图像上。 I want the btn to appear when the user hovers over the image, and when they move the cursor off the image it disappears. 我希望当用户将鼠标悬停在图像上时将btn出现,并且当他们将光标移离图像时它会消失。 I'm also wanting to add a subtle ease-in-out effect so it transitions smoothly. 我还想添加细微的缓入效果,使其平滑过渡。 Any help is much appreciated. 任何帮助深表感谢。 Here is my css and html. 这是我的CSS和HTML。
HTML 的HTML
<div class="row">
<div class="col-md-4">
<div class="imgAbout">
<img src="http://placehold.it/580x410" class="img-responsive" alt="Neil Elmouchi Bio">
<div class="center-container">
<a class="btn btn-sm btn-primary" href="bios/teamBioNeil.html">View More</a>
</div>
</div>
<h1>Name</h1>
<h3>Chairman & CEO<br>
Senior Wealth Advisor</h3>
</div> <!-- end col-md-4 -->
</div>
CSS 的CSS
#about img {
margin: 0 auto;
}
.imgAbout {
position: relative;
}
.imgAbout img {
display: block;
height: auto;
}
.center-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
Add to your CSS next lines: 将以下行添加到您的CSS中:
.imgAbout .center-container .btn {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.imgAbout:hover > .center-container .btn {
visibility:visible;
opacity: 1;
}
How to make twitter bootstrap menu dropdown on hover rather than click 如何在悬停而不是单击上使Twitter Bootstrap菜单下拉菜单
Hopefully this will help you. 希望这会对您有所帮助。
I don't know how to do the subtle ease-in-out when using bootstrap, though you could use the fadeIn option from jQuery ( http://api.jquery.com/fadein/ ). 尽管您可以使用jQuery( http://api.jquery.com/fadein/ )的fadeIn选项,但我不知道在使用引导程序时如何进行细微的修改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.