在没有悬停效果的情况下悬停效果不匹配的图像上的填充css

时间：2018-02-20 21:39:24

标签： javascript html css twitter-bootstrap

使用来自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 &raquo;</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>

谢谢

2 个答案:

答案 0 :(得分：1)

你在css代码中有一个换行符：

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg <-- HERE

你不能在引号内使用未转义的换行符，因为它会对你的css进行制动。

解决方案是：删除引号或删除或撤消换行符。

工作片段：

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<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 &raquo;</a></p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我认为这是因为hovereffect中的float:left

你可以像这样改变attr左边的

.hovereffect {
width: 100%;
height: auto;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #555;
}

通过

.hovereffect {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
left : 0;
text-align: center;
cursor: default;
background: #555;
}
相关问题
最新问题