Transition CSS 伪元素

Question

我似乎无法让我的伪元素在悬停时变得轻松。我不确定我的 CSS 出了什么问题。我无法更改 HTML，因为它在 Drupal 中。 Fiddle

.portfolio-image {
  position: relative;
  background: none;  
}
.portfolio-image a {
    background: none;
}
.portfolio-image:hover a:before {
  content: "\f002";
  font-family: 'FontAwesome';
  color: yellow;
  position: absolute;
  padding-top: 25%;
  padding-left: 45%;
  font-size: 5em;
  line-height: 0em;
  height: 100%;
  width: 100%;
  max-width: 1280px;
  background: rgba(0, 0, 0, 0.7);
  transition: 0.7s ease;
  -webkit-transition: 0.7s ease;
  -moz-transition: 0.7s ease;
}
.portfolio-image img {
  width: 100%;
  height: auto;
  max-width: 1280px;
}

     <div width="500px";> <div class="portfolio-image"><a href="http://iTreeLessons.com"><img typeof="foaf:Image" src="http://staging.edcupaioli.com/sites/default/files/Home%20%20%20iTree%20Lesson%20Plans.png" alt="" height="705" width="1280"></a></div>    </div>

Answer 1

我明白了。 smnbbrv 在创建没有悬停的伪元素上是正确的，然后添加过渡。我使伪元素的不透明度为 0 以使其隐藏，然后在悬停时调用不透明度为 1 并具有过渡效果。

.portfolio-image {
  position: relative;
}
.portfolio-image a:before {
  content: "\f14c";
  font-family: 'FontAwesome';
  position: absolute;
  color: yellow;
  padding-top: 25%;
  padding-left: 45%;
  font-size: 5em;
  line-height: 0em;
  height: 100%;
  width: 100%;
  max-width: 1280px;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.portfolio-image a:hover:before {
  opacity: 1;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}
.portfolio-image img {
  width: 100%;
  height: auto;
  max-width: 1280px;
  z-index: 0;
}

<div class="portfolio-image">
  <a href="http://symantecinnovationawards.com/">
    <img typeof="foaf:Image" src="http://staging.edcupaioli.com/sites/default/files/Award%20Details%20%20%20Symantec%20Innovation%20Awards.png" width="1280" height="626" alt="">
  </a>
</div>

Transition CSS 伪元素

Transition CSS pseudo element

css

transition

pseudo-element