Псевдоэлемент перехода 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>