Все выполняю с помощью bootstrap.
Нужно выполнить блоки в точности как на прилагаемом изображении.
Самые главные моменты:
чтобы изображение залезало на рамку
чтобы при наведении на блок, внизу появлялась полоса красная.Причем это полоса должна быть НЕ со скошенными краями, как если бы мы просто изменяли цвет нижнего бордера на красный.
и чтобы все было адаптивно и не сыпалось при изменении размера экрана.
Возможно есть какой-то простой способ реализации этой штуки. У меня пока все с жуткими костылями, и сыпется верстка. Испробовал уже самые разные вариации
Ответ
section {
box-sizing: content-box;
height: 64px;
border-bottom: 3px solid transparent;
margin: 1em 0;
}
img {
height: 100%;
float: left;
}
div {
box-sizing: border-box;
height: 100%;
overflow: hidden;
padding: .5em;
border: 3px solid silver;
border-left: none;
}
section:hover {
border-color: red;
}
Комментариев нет:
Отправить комментарий