CSS3 Transition not working properly

Question

So I have the exact same CSS3 transition in to places, just with different markup.

one is using just an image in an li wrapped in an anchor tag, and one is using an li tag with an anchor tag inside of that which wraps a figure and a figcaption..

here is the markup.

<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>

here is the css for the markup shown above..

.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;
}

What the heck am I missing?! its driving me crazy not being able to figure it out..

and yes i'm aware its only got the -webkit-transition property. Thats cause i'm working in Chrome to figure it out.. I had them all and tried in every browser and nothing worked. So I just left this one and was gonna figure it out in Chrome first.

any help trying to spot my stupidity would be awesome! :)

Answer 1

Have you tried removing the ::after for the :hover pseudo?