如何在悬停时使用0.5的不透明度制作img粉红色？

时间：2017-10-31 14:15:47

标签： html

我有一组图像，当悬停时，图像会淡化（白色淡化）其颜色。但我想要的是它是粉红色（粉红色褪色），不透明度为0.5。我无法改变它的颜色，我所做的只是徘徊时图像的褪色（发白淡化）。 

.img-overlay {
  position: relative;
}

.img-overlay img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.img-overlay:hover img {
  opacity: 0.5;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.img-overlay:hover .middle {
  opacity: 1;
}
<div class="wrappingimages">
  <div class="row">
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

由于过滤器与所有浏览器不兼容，您可能需要将图像设置为背景并创建叠加层，该叠加层仅在悬停时显示。它会是这样的：

<div class="box overlay red" style="background-image: url('https://picsum.photos/200?image=187');">
  <h1>Pasta</h1>
</div>
<div class="box overlay blue" style="background-image: url('https://picsum.photos/200?image=378');">
    <h1>Pasta</h1>
</div>
<div class="box overlay green" style="background-image: url('https://picsum.photos/200?image=339');">
    <h1>Pasta</h1>
</div>
<div class="box overlay orange" style="background-image: url('https://picsum.photos/200?image=329');">
    <h1>Pasta</h1>
</div>


body {
  text-align: center;
}
.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  background-image: url(http://lorempixel.com/output/food-q-c-100-100-10.jpg);
  position: relative;
}

.overlay {
  position: relative;
}

.overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: none;
  z-index:0;
}

.overlay:hover:before{
  display: block;
}

.red:before {
  background-color: rgba(255,0,0,0.5);
}

.blue:before {
  background-color: rgba(0,0,255,0.5);
}

.green:before{
  background-color: rgba(0,255,0,0.5);
}

.orange:before {
  background-color: rgba(255,153,0, 0.5);
}

.box * {
    position: relative;
    /* hack */
}

h1 {
  color:white;
}

然后，您可以使用颜色和不透明度。 看看它在codepen上的外观。

答案 1 :(得分：0)

您可以使用不同css filters的组合来获得您正在寻找的结果。我做了一个例子，摆弄并调整数字，直到它看起来呈粉红色。

.img-overlay {
  position: relative;
}

.img-overlay img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.img-overlay:hover img {
  -webkit-filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
  filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.img-overlay:hover .middle {
  opacity: 1;
}
<div class="wrappingimages">
  <div class="row">
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
      <div class="middle">
        <div class="text">Pasta</div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

.img-overlay:hover:after img {background:pink; opacity:0.5;}
相关问题
最新问题