如何在图像标签上添加到伪元素的转换？

时间：2017-10-10 14:05:46

标签： html css

我希望在悬停时向图片标记添加转换。悬停时，图像会显示渐变叠加，但不会平滑。我试着添加：

<canvas id="canvas"></canvas>
<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>

但它没有用。

＆＃13;
＆＃13; 
transition: background 1s ease;
＆＃13; 
.teammember {
  height: 283px;
}

.teammember:hover .teammember-details {
  display: block;
}

.teammember:hover .teammember-photo:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: -moz-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(56, 112, 167, 0.6)), color-stop(100%, rgba(241, 168, 12, 0.3)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3870a7', endColorstr='#f1a80c', GradientType=0);
  /* IE6-9 */
}

.teammember .teammember-photo {
  position: relative;
  display: inline-block;
  height: inherit;
}

.teammember .teammember-photo:before {
  transition: background 1s ease-in;
}
＆＃13;
＆＃13;
＆＃13;

如何在悬停时向图片标记添加转换？

4 个答案:

答案 0 :(得分：2)

在您的代码中，实际上只有在父元素悬停时才会将所有必需的样式应用于:before伪元素。您只需在基础状态下应用这些样式+ opacity: 0（不使用悬停），然后只需在opacity: 1状态下切换:hover。

换句话说，为.teammember:hover .teammember-photo:before定义的所有样式都应该简单地移动到.teammember .teammember-photo:before。选择器.teammember:hover .teammember-photo:before只应用于更改不透明度属性。

.teammember {
  height: 283px;
}

.teammember:hover .teammember-details {
  display: block;
}

.teammember:hover .teammember-photo:before {
  opacity: 1;
}

.teammember .teammember-photo {
  position: relative;
  display: inline-block;
  height: inherit;
}

.teammember .teammember-photo:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: linear-gradient(to bottom, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  opacity: 0;
  transition: opacity 1s ease-in;
}
<div class="teammember">
  <div class="teammember-photo">
    <img class="teammember-img" src="http://via.placeholder.com/300x300" alt="Image">
    <div class="teammember-details">
      <div class="teammember-details-top">
        <strong>Name</strong>
        <p>Function</p>
      </div>
      <div class="teammember-linkedin">
        <a href="#" target="_blank"><span class="linkedin"></span></a>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

您可以使用opacity代替display 

.teammember {
  height: 283px;
}

.teammember:hover .teammember-details {
  display: block;
}

.teammember .teammember-photo:before {
  display: inline-block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(56, 112, 167, 0.6)), color-stop(100%, rgba(241, 168, 12, 0.3)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3870a7', endColorstr='#f1a80c', GradientType=0);
  /* IE6-9 */
  opacity: 0;
  transition: 1s ease-in;
}

.teammember:hover .teammember-photo:before {
  opacity: 1;
}

.teammember .teammember-photo {
  position: relative;
  display: inline-block;
  height: inherit;
}
<div class="teammember">
  <div class="teammember-photo">
    <img class="teammember-img" src="http://via.placeholder.com/300x300" alt="Image">
    <div class="teammember-details">
      <div class="teammember-details-top">
        <strong>Name</strong>
        <p>Function</p>
      </div>
      <div class="teammember-linkedin">
        <a href="#" target="_blank"><span class="linkedin"></span></a>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

不幸的是你无法转换渐变（还）。解决方法是转换它的opacity。

你的CSS还有另一个问题 - 大多数:before psuedo元素的样式都处于.teammember:hover状态。将它们移到基础.teammember .teammember-photo:before选择器。

像这样：

.teammember {
  height: 283px;
}

.teammember:hover .teammember-details {
  display: block;
}

.teammember .teammember-photo:before {
  content: '';
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: -moz-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(56, 112, 167, 0.6)), color-stop(100%, rgba(241, 168, 12, 0.3)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(56, 112, 167, 0.6) 0%, rgba(241, 168, 12, 0.3) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3870a7', endColorstr='#f1a80c', GradientType=0);
  /* IE6-9 */
 
}

.teammember:hover .teammember-photo:before {
   opacity: 1;
}

.teammember .teammember-photo {
  position: relative;
  display: inline-block;
  height: inherit;
}
<div class="teammember">
  <div class="teammember-photo">
    <img class="teammember-img" src="http://via.placeholder.com/300x300" alt="Image">
    <div class="teammember-details">
      <div class="teammember-details-top">
        <strong>Name</strong>
        <p>Function</p>
      </div>
      <div class="teammember-linkedin">
        <a href="#" target="_blank"><span class="linkedin"></span></a>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

据我所知，这是不可能的，但有办法实现这一目标。

我发现Dave Lunny先生写了一篇写得很好的文章来解决这个问题。

见这里：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

我希望这很有帮助。

相关问题
最新问题