Таким образом, у меня точно такой же переход CSS3 к местам, только с другой разметкой.
один использует только изображение в li, обернутом в тег привязки, а другой использует тег 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. Это потому, что я работаю в Chrome, чтобы понять это ... У меня были их все и пробовал в каждом браузере, и ничего не получалось. Так что я просто оставил этот и собирался сначала выяснить это в Chrome.
любая помощь в попытках обнаружить мою глупость была бы потрясающей! :)