<table>
    <tr>
        <td colspan="2">
          <img src="http://placehold.it/260x130" alt="">
          <h3>Коллекция 1</h3>
          <a href="#">Смотреть коллекцию</a>
      </td>
        <td rowspan="2">
          <img src="http://placehold.it/130x260" alt="">
          <h3>Коллекция 2</h3>
          <a href="#">Смотреть коллекцию</a>
      </td>
    </tr>
    <tr>
        <td>
          <img src="http://placehold.it/130" alt="">
          <h3>Коолекция 3</h3>
          <a href="#">Смотреть коллекцию</a>
      </td>
        <td>
          <img src="http://placehold.it/130" alt="">
          <h3>Коллекция 4</h3>
          <a href="#">Смотреть коллекцию</a>
      </td>
    </tr>
</table>

*{
  margin: 0;
  padding: 0;
}

table{
  width: 640px;
  margin:  auto;
}

img{
  display: block;
  width: 100%;
  height: 100%;
}

td{
  position: relative;
  overflow: hidden;
}

td h3{
  position: absolute;
  bottom: 20px;
  left: 20px;
  transition: 0.20s
}

td a{
  position: absolute;
  top: 100%;
  left: 20px;
  visibility: hidden;
  transition: 0.20s
}

td:hover h3{
  transform: translateY(-20px)
}

td:hover a{
  transform: translateY(-30px);
  visibility: visible;
}