JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<section>
  <img src="http://f.mypage.ru/6e4af88cc78db945ebdc802cee4624da_42989cf41c481cf14353424ad0973e2e.jpg">
  <div>Куррорт-Аваза</div>
</section>

<section>
  <img src="http://toyrism.ru/wp-content/uploads/2014/08/Красивый-болгарский-курорт-Созополь-5.jpg">
  <div>Красивый болгарский курорт Созополь</div>
</section>

<section>
  <img src="https://c1.staticflickr.com/4/3803/33188251585_155d17931a_o.jpg">
  <div>Hotel Splendid Conference Spa Resort 5* расположен в чудесном курортном местечке – Бечичи на берегу чистейшего Адриатического моря.</div>
</section>

CSS

section {
  position: relative;
  box-sizing: border-box;
  height: 64px;
  width: 100%;
  margin: 1em 0;
}

section:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  content: '';
  background-color: #7d2d3a;
  transition: width .4s;
}

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 {
  box-shadow: 0 0 6px 3px rgba(0,0,0,.08);
}

section:hover:after {
  width: 100%;
}

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