【发布时间】：2019-01-24 04:37:44
【问题描述】：
使用https://miketricking.github.io/bootstrap-image-hover/# 效果 13 中的 css 样式对图像产生悬停效果，这有效，但文本上的填充在此设置下停止工作。
.hovereffect {
width: 100%;
height: auto;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #555;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
filter: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"> <feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /> <feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter> </svg>#filter);
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
background-color: transparent;
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.image-text {
text-align: justify;
padding: 2rem;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-sm-6">
<div class="hovereffect">
<img class="image-style" src="https://www.matheson.com/images/uploads/site-images/MOP-Office-London.jpg" alt="">
<div class="overlay">
<h2>London</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
<p class="image-text">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<br>More details <a calss="link" href="http://localhost/website/about.html" role="button">about us »</a></p>
</div>填充有效，但 .image-text css 从图像后面开始？
我不确定是我设置错误，还是您知道更好的方法可以帮助我。
下面是我希望填充做的，但图像使用了悬停效果。
.image-text {
text-align: justify;
padding: 2rem;
} <div class="col-md-4 col-sm-6">
<img class="image-style" src="https://www.matheson.com/images/uploads/site-images/MOP-Office-London.jpg" alt="">
<p class="image-text">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>谢谢
【问题讨论】：
-
你能不能更好地解释一下图像代码是：和我的工作图像代码是：？我不确定您正在尝试的代码是什么。
-
请在 sn-p 中设置您的代码。
-
看起来填充只在左侧、右侧和底部起作用，但它也适用于顶部，但填充是从图像中开始的，所以它隐藏了顶部的填充
标签： javascript html css twitter-bootstrap