CSS3 Переход не работает должным образом

Question

Таким образом, у меня есть тот же переход CSS3 в места, только с разной разметкой.

один использует только изображение в литии, завернутом в якорном теге, и один использует Li тег с якорным тегом внутри того, что оборачивает фигуру и figcaption ..

здесь разметка ,

<ul class="teamProfiles"> 
    <li> 
     <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris.png" /><figcaption>Kris R</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris2.jpg" /><figcaption>Kris R</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Designer & Code Ninja"><figure><img src="assets/images/players/playerJake.jpg" /><figcaption>Jake C</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Writer"><figure><img src="assets/images/players/playerBacon.jpg" /><figcaption>Steven B</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Laywer"><figure><img src="assets/images/players/playerJon.jpg" /><figcaption>John A</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="Accountant"><figure><img src="assets/images/players/playerAmy.jpg" /><figcaption>Amy A</figcaption></figure></a> 
    </li> 
    <li> 
     <a href="#" title="We're Hiring"><figure><img src="assets/images/players/playerDarth.jpg" /><figcaption>You</figcaption></figure></a> 
    </li> 
</ul> 

здесь является CSS для разметки показано выше ..

.teamProfiles { 
    width: 920px; 
} 
.teamProfiles > li { 
    float: left; 
    width: 65px; 
    height: 85px; 
    border: 3px solid #fff; 
    box-shadow: 0 0 4px rgba(0, 0, 0, .3); 
    margin-left: 3%; 
    display: inline-block; 
} 
.teamProfiles > li:first-child { 
    margin-left: 0; 
} 
.teamProfiles > li:last-child { 
    margin-right: 3%; 
} 
.teamProfiles figcaption { 
    padding-top: 4px; 
} 
.teamProfiles > li > a > figure { 
    width: 65px; 
    height: 65px; 
} 
.teamProfiles > li > a { 
    display: block; 
    height: 85px; 
    width: 65px; 
    text-decoration: none; 
    text-align: center; 
    font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 600; 
    font-size: .8em; 
    font-smooth: always; 
    -webkit-font-smoothing: antialiased; 
    color: #333; 
    position: relative; 
    overflow: hidden; 
} 
.teamProfiles > li > a::after { 
    content: attr(title); 
    background: rgba(0, 0, 0, .5); 
    display: inline-block; 
    position: absolute; 
    width: 65px; 
    height: 40px; 
    padding-top: 25px; 
    top: -20px; 
    left: 0; 
    color: #9ecd41; 
    -webkit-transition: all .5s ease-in-out .6s; 
} 
.teamProfiles > li > a:hover::after { 
    top: 0; 
} 

Какого черта мне не хватает ?! это сводит меня с ума, не в состоянии понять это.

и да, я знаю, что он получил только свойство -webkit-transition. Thats, потому что я работаю в Chrome, чтобы понять это. У меня были все они и пробовали в каждом браузере, и ничего не работало. Так что я просто оставил это, и сначала выясню это в Chrome.

любая помощь, пытаясь определить мою глупость, была бы замечательной! :)

Answer 1

Вы пытались удалить :: after для: hover pseudo?