Помогите советом, как с html и css сделать такие блоки?

#html #css #вёрстка #bootstrap

Все выполняю с помощью bootstrap. 
Нужно выполнить блоки в точности как на прилагаемом изображении.
Самые главные моменты:


чтобы изображение залезало на рамку
чтобы при наведении на блок, внизу появлялась полоса красная.Причем это полоса должна
быть НЕ со скошенными краями, как если бы мы просто изменяли цвет нижнего бордера на
красный.
и чтобы все было адаптивно и не сыпалось при изменении размера экрана.


Возможно есть какой-то простой способ реализации этой штуки. У меня пока все с жуткими
костылями, и сыпется верстка. Испробовал уже самые разные вариации
    

Ответы

Ответ 1

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;
}

  
  
Тут какое-то описание



  
  
Тут какое-то описание



  
  
Тут какое-то описание



Ответ 2

Похоже на то, учитывая, что в при наведении серой рамки нет + появляется тень (судя
по скриншоту).



section {
  box-sizing: border-box;
  height: 64px;
  border-bottom: 2px solid transparent;
  margin: 1em 0;
}

img {
  height: 100%;
  float: left;
}

div {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: .5em;
  border: 1px solid #ddd;
  border-left: none;
  background-color: #fff;
}

section:hover {
  border-color: #7d2d3a;
  box-shadow: 0 0 6px 3px rgba(0,0,0,.08);
}

section:hover div {
  border-color: transparent;
}

  
  
Куррорт-Аваза



  
  
Красивый болгарский курорт Созополь



  
  
Hotel Splendid Conference Spa Resort 5* расположен в чудесном курортном местечке
– Бечичи на берегу чистейшего Адриатического моря.







А насчёт:


  Вроде решил. Добавил в div:hover нижняя рамка none. Вроде пока не прыгает ничего,
и скос исчез) 


то лучше использовать селектор:

section:hover div


чтобы при наведении и на пикчу срабатывало то же самое поведение.



Так же можно вместо красного бордера для section сделать изящнее, с анимацией через
section:after. 

Например https://jsfiddle.net/acid_grip/3u3pu41y/