Živá ukázka

Výsledek

<div class="container">
  <div class="card">
    <div class="imgBx">
      <img src="https://png.pngtree.com/png-vector/20190409/ourmid/pngtree-classical-stylish-car-png-image_902001.jpg">
    </div>
    
    <div class="content-title">
      <h2>Nadpis 1</h2>
    </div>
    
    <div class="content">
      <p>
        &middot; Položka 1<br>
        &middot; Položka 2<br>
        &middot; Položka 3
      </p>
    </div>
  </div>
  
  <div class="card">
    <div class="imgBx">
      <img src="https://png.pngtree.com/png-vector/20190409/ourmid/pngtree-classical-stylish-car-png-image_902001.jpg">
    </div>
    
    <div class="content-title">
      <h2>Nadpis 2</h2>
    </div>
    
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Vestibulum fermentum tortor id mi.
        In enim a arcu imperdiet malesuada.
        Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nunc tincidunt ante vitae massa.
        Praesent vitae arcu tempor neque lacinia pretium. Nullam eget nisl.
      </p>
    </div>
  </div>
  
  <div class="card">
    <div class="imgBx">
      <img src="https://png.pngtree.com/png-vector/20190409/ourmid/pngtree-classical-stylish-car-png-image_902001.jpg">
    </div>
    
    <div class="content-title">
      <h2>Nadpis 3</h2>
    </div>
    
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Vestibulum fermentum tortor id mi.
        In enim a arcu imperdiet malesuada.
        Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nunc tincidunt ante vitae massa.
        Praesent vitae arcu tempor neque lacinia pretium. Nullam eget nisl.
      </p>
    </div>
  </div>
</div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

* {
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px;
}

.container .card {
  position: relative;
  max-width: 300px;
  height: 255px;
  background: #fff;
  margin: 30px 10px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 202px rgba(0, 0, 0, 0.5);
  transition: 0.3s ease-in-out;
}

.container .card:hover {
  height: 420px;
}

.container .card .imgBx {
  position: relative;
  width: 260px;
  height: 260px;
  top: -60px;
  left: 20px;
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.container .card .imgBx img {
  max-width: 100%;
  border-radius: 4px;
}

.container .card .content-title {
  position: relative;
  margin-top: -40px;
  padding: 10px 15px;
  color: #111;
}

.container .card .content {
  position: relative;
  margin-top: -140px;
  padding: 10px 15px;
  color: #111;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.container .card:hover .content {
  visibility: visible;
  opacity: 1;
  margin-top: 0;
  transition-delay: 0.3s;
}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS