文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在具有悬停效果的图像上填充不匹配没有悬停效果的相同图像的css

问在具有悬停效果的图像上填充不匹配没有悬停效果的相同图像的css
EN

Stack Overflow用户
提问于 2018-02-21 05:39:24
回答 2查看 114关注 0票数 0

使用https://miketricking.github.io/bootstrap-image-hover/# effect 13中的css样式对图像进行悬停效果，这是可行的，但文本上的填充无法使用此设置。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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从图像后面开始？

我不确定是我设置得不正确，还是你知道更好的方法来帮助我。

下面是我希望填充所做的事情，但使用了悬停效果的图像。

​

代码语言：javascript
复制
.image-text {

  text-align: justify;
  padding: 2rem;
}
代码语言：javascript
复制
    <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>

​

谢谢

javascript
html
css
twitter-bootstrap
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-21 07:56:19

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

代码语言：javascript
复制
.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg <-- HERE

你不能在引号中有未转义的换行符，因为它会阻止你的css。

解决方法是:删除引号或删除或转义换行符。

工作代码段：

​

代码语言：javascript
复制
.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);
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2018-03-13 06:35:51

我认为这是因为float:left在悬停效果中

你可以像这样通过attr left来改变浮动

代码语言：javascript
复制
.hovereffect {
width: 100%;
height: auto;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #555;
}

通过

代码语言：javascript
复制
.hovereffect {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
left : 0;
text-align: center;
cursor: default;
background: #555;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48894656

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档