<div class="card">
    <div class="card-content">
      <img src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80" alt="Dog" />
      <div class="card-body">
        <h3>Dog fact</h3>
        <p> Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.</p>
      </div>
    </div>
  </div>

@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 20px;
  font-family: 'Ubuntu', sans-serif;
}

.card {
  perspective: 1000px;
  width: 300px;
}

.card-content {
  box-shadow: 0 2rem 2rem rgba(0, 0, 0, .5);
  transition: all 2s;
}

.card:hover .card-content {
  transform: rotateY(180deg);
}

.card-content img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.card-body {
  padding: 20px;
}

.card-body h3 {
  margin-bottom: 20px;
}