[英]Image overlay text not responsive Bootstrap
I'm well aware that this is a recurring question. 我很清楚这是一个反复出现的问题。 I've checked my code but as far as I can see it should work.
我检查了我的代码,但据我所知它应该可以工作。 It should work without using media queries or vw.(I think)
它应该在不使用媒体查询或大众的情况下工作。(我认为)
The intention: Having an image and when I hover over it a text appears. 目的是:有一个图像,当我将鼠标悬停在它上面时,会出现一个文本。
The problem: The text appears, but it is not responsive. 问题:出现文本,但无响应。
Please let me know what should I do differently. 请让我知道我应该怎么做。
Thank you for your time. 感谢您的时间。
HTML: HTML:
<section id="recent-news">
<div class="container">
<div class="center wow fadeInDown">
<h2>Recent News</h2>
<h3 class="lead">The latest news about the school, research, students and more.</h3>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="recent-news-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-news-inner">
<h3 class = "text-center"><a href="#">Mobile Development</a> </h3>
<p>We lead the field. Read more about the latest updates in this field.</p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
CSS: CSS:
#recent-news .col-xs-4.col-sm-4.col-md-3{
padding: 8px;
}
#recent-news{
padding-bottom: 70px;
}
.recent-news-wrap {
position: relative;
}
.recent-news-wrap img{
width: 100%;
}
.recent-news-wrap .recent-news-inner{
top: 0;
background: transparent;
opacity: .8;
width: 100%;
border-radius: 0;
margin-bottom: 0;
}
.recent-news-wrap .recent-news-inner h3{
margin: 10px 0;
}
.recent-news-wrap .recent-news-inner h3 a{
font-size: 24px;
color: #fff;
}
.recent-news-wrap .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #3579DC;
color: #fff;
vertical-align: middle;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
padding: 30px;
text-align: center;
}
.recent-news-wrap .overlay .preview {
bottom: 0;
display: inline-block;
height: 35px;
line-height: 35px;
border-radius: 0;
background: transparent;
text-align: center;
color: #fff;
}
.recent-news-wrap:hover .overlay {
opacity: 1;
}
By responsive I am guessing you want the overlay to fit on the page. 通过响应,我猜您希望叠加层适合页面。
Use width: calc()
inside of .recent-news-wrap .overlay {}
like this: 在
.recent-news-wrap .overlay {}
内使用width: calc()
,如下所示:
.recent-news-wrap .overlay {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 60px);
height: 100%;
opacity: 0;
border-radius: 0;
background: #3579DC;
color: #fff;
vertical-align: middle;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
padding: 30px;
text-align: center;
}
See fiddle: https://jsfiddle.net/DIRTY_SMITH/2xzj4dqo/1/ 参见小提琴: https : //jsfiddle.net/DIRTY_SMITH/2xzj4dqo/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.