toggle content using pure CSS

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <header><h1>Toggle content using pure CSS</h1></header>
  <hr>
  <div class="container">
    <div class="row">
      <div class="wrapper col-sm-4">
        <div><span class="glyphicon glyphicon-glass"></span></div>
        <div class="front">
          Glass
        </div>
        <div class="back">
          <div class="row">
            <div class="col-sm-4">
              Glass Col1: something about this subject here
            </div>
            <div class="col-sm-4">
              Glass Col2: something about this subject here
            </div>
            <div class="col-sm-4">
              Glass Col3: something about this subject here
            </div>
          </div>
        </div>
      </div>

      <div class="wrapper col-sm-4 signal">
        <div><span class="glyphicon glyphicon-signal"></span></div>
        <div class="box front">
          Signal
        </div>
        <div class="box back">
          Signal: Say something about this subject here
        </div>
      </div>

      <div class="wrapper col-sm-4 heart">
        <div><span class="glyphicon glyphicon-heart"></span></div>
        <div class="box front">
          Heart
        </div>
        <div class="box back">
          Heart: Say something about this subject here
        </div>
      </div>
    </div>
  </div>
</body>

</html>

// Code goes here

/* Styles go here */
header {
  padding: 5px;
}
.wrapper {
  height: 200px;
  font-size: 3em;
  box-sizing: border-box;
  border: 5px solid #ccc;
  padding: 20px;
  text-align: center;
  background-color: #fcd000;
  margin: 20px auto;
  overflow: hidden;
}

.wrapper.signal {
  background-color: #3f51b5
}

.wrapper.heart {
  background-color: #f00
}

.front {
  background-color: #ff3c41;
  color: black;
}

.back {
  background-color: #246524;
  display: none;
  color: white;
  font-size: 16px;
  padding: 5px;
}

.wrapper:hover .back {
  display: block;
  overflow: hidden;
}

.wrapper:hover .front {
  display: none;
}

.wrapper:hover {
  color: white;
  background-color: #000;
}