Пробую делать одно и тоже несколькими вариантами в качестве практики. Помогите пожауйста вместо того варианта как сделано переделать все списком ul и использовать :nth-child. Не используя классы для элементов li
Как я понимаю чтобы сделать это списком придется попариться с позиционированием. Наверное тогда и картинку нужно фоном вставлять, чтобы не мешала список позиционировать. И нужно ли иконки этих ссылок тоже делать через css вместе img..
И еще я видимо неправильно посчитала ширину элементов и отступов. В данном варианте центральная картинка перекрывает 3 пикселя у кнопок слева. Но получается как-то так, что она лежит чуть ниже, чем верхний элемент в наведенном состоянии. И поэтому кусочек верхнего элемента выглядывает из-за картинки
*,
*:before,
*:after {
box-sizing: border-box;
}
.services{
width: 980px;
}
.btn {
display: inline-block;
vertical-align: middle;
/*padding: .5rem 1rem;*/
text-transform: uppercase;
color: #fff;
background: #5b667a;
text-decoration: none;
margin: 36px 15px;
height: 56px;
width: 235px;
padding-top: 18px;
font-family: sans-serif;
font-weight: bold;
}
.btn img {
display: none;
}
.btn:hover img{
display: block;
margin: 12px auto;
}
.btn:hover{
height: 128px;
background: #6884ad;
margin: 0 13px;
}
.otolaryngologist:hover{
background: #ffcc29;
}
.row {
text-align: center;
overflow: hidden;
}
.left {
width: 25%;
float: left;
}
.right {
width: 25%;
float: right;
}
.center {
width: 50%;
float: left;
}
.center img {
max-width: 100%;
width: 100%;
height: auto;
}
<div class="services">
<div class="row">
<a href="#" class="btn"><img src="images/pediatria.png" alt=""/>Педіатрія</a>
<a href="#" class="btn"><img src="images/therapy.png" alt=""/>Терапія</a>
</div>
<div class="row">
<div class="left">
<a href="#" class="btn otolaryngologist"><img src="images/otolaryngologist.png" alt=""/>Отоларинголог</a>
<a href="#" class="btn"><img src="images/cosmetology.png" alt=""/>Косметологія</a>
<a href="#" class="btn"><img src="images/mamology.png" alt=""/>Мамологія</a>
<a href="#" class="btn"><img src="images/dietology.png" alt=""/>Дієтологія</a>
<a href="#" class="btn"><img src="images/urology.png" alt=""/>Урологія</a>
<a href="#" class="btn"><img src="images/surgery.png" alt=""/>Хірургія</a>
<a href="#" class="btn"><img src="images/usd.png" alt=""/>Узд</a>
<a href="#" class="btn"><img src="images/laboratory.png" alt=""/>Лабораторія</a>
</div>
<div class="center">
<img src="https://i.stack.imgur.com/H8zsJ.png" alt=""/>
</div>
<div class="right">
<a href="#" class="btn"><img src="images/neurology.png" alt=""/>Неврологія</a>
<a href="#" class="btn"><img src="images/dermatology.png" alt=""/>Дерматологія</a>
<a href="#" class="btn"><img src="images/cardiology.png" alt=""/>Кардіологія</a>
<a href="#" class="btn"><img src="images/traumatology.png" alt=""/>Травматологія</a>
<a href="#" class="btn"><img src="images/gynecology.png" alt=""/>Гінекологія</a>
<a href="#" class="btn"><img src="images/proctology.png" alt=""/>Проктологія</a>
<a href="#" class="btn"><img src="images/manual_therapy.png" alt=""/>Мануальна терапія</a>
<a href="#" class="btn"><img src="images/physiotherapy.png" alt=""/>Фізіотерапія</a>
</div>
</div>
<div class="row">
<a href="#" class="btn"><img src="images/massage.png" alt=""/>Масаж</a>
</div>
</div>
.left
и.right
и уменьшить.center
. Но и кнопки вверху нужно будет уменьшить. Пример.