Доброго вечера форумчане . После просмотра уроков верстки, решил самостоятельно сверстать макет (скачать)
При наведении на .about-team, мета должна выезжать вверх c прозрачным фоном и так-же появляются соц сети, уже несколько часов ломаю голову, но никак не получается сделать все нормально, взглянув на код вы сами сделаете выводы))
Уважаемые эксперты, просьба: Направьте меня на путь истинный. Как бы вы все это оформили?
п.с Простите за быдло код
<section class="team center-block-main">
<h2>Meet Us</h2>
<div class="about-team">
<img src="image/team-1.jpg">
<p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer <img class="meta-soc" src="image/soc.png"></p>
</div>
<div class="about-team">
<img src="image/team-1.jpg">
<p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p>
</div>
<div class="about-team">
<img src="image/team-1.jpg">
<p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p>
</div>
<div class="about-team">
<img src="image/team-1.jpg">
<p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p>
</div>
</section>
.team{
font-family: 'Roboto', sans-serif;
text-align: center;
}
.team h2{
font-size:1.875em;
color:#454546;
font-weight: 600;
margin-bottom: 30px;
}
.about-team{
float:left;
width:21%;
margin-left: 4%;
position: relative;
font-size:0;
text-align: center;
}
.meta-info{
position: absolute;
background: rgba(114,107,101,0.9);
padding: 10px 77px;
bottom: 0;
font-size:14px;
color:#fff;
font-weight: 300;
}
.meta-info span{
font-weight: 500;
font-size: 18px;
}
.about-team:hover .meta-info{
background: rgba(29,222,133,0.7);
top:0;
bottom: 0;
left: 0;
right:0;
padding: 50% 0 0 0;
-webkit-transition-duration: .1s;
-moz-transition-duration: .1s;
-o-transition-duration: .1s;
transition-duration: .1s;
}
.about-team:hover .meta-soc{
display: block;
}
.meta-soc{
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
display: none;
}
.about-team:first-of-type{
margin-left:0;
}
