ShaxaY

Отличный вариант! Спасибо! А как быть с соц сетями? Как их лучше завернуть п.с height:94%; учитывая паддинги классно зашло

Доброго вечера форумчане . После просмотра уроков верстки, решил самостоятельно сверстать макет (скачать) При наведении на .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; }

Думаю я просто неправильно указал значение

Пробывал, не красиво выходит(

Спасибо большое! Совсем забыл про outline. На данный момент просто использовал box-sizing:border-box;

Верстаю макет, имеется блок с border в 1px, при наведении он должен менять цвет и становится на 1px больше т.е 2px, все сделал, но при наведении он смещает на 1px другие блоки, как можно это исправить? .welcome-box{ float:left; width:28%; margin-left: 3.3%; text-align: center; border:solid 1px #cac8c5; padding:15px 8px; } .welcome-box:hover{ border:solid 2px #1dde85; } .welcome .welcome-box:first-child{ margin-left:0; }