JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containergaleria">

  <div id="imagens">
    <p class="centertext" align="right"><a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">IMAGENS</a>&nbsp;&nbsp;</p>
  </div>

  <div id="videos">
    <p align="left">&nbsp;&nbsp;<a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">VĂŤDEOS</a></p>
  </div>

</div>

CSS

#containergaleria {
  display: table;
  width: 100%;
}

#containergaleria div {
  display: table-cell;
  width: 50%;
  position: relative;
  cursor: pointer
}

#imagens:before,
#videos:before {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  content: "";
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  filter: blur(0);
  -webkit-filter: blur(0);
}

#imagens:hover:before,
#videos:hover:before {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

#imagens:before {
  background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
  background-position: right center;
}

#videos:before {
  background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
  background-position: left center;
}

#containergaleria div p {
  position: relative
}

p.centertext {
  margin-top: 25%;
  margin-bottom: 25%
}

body {
  overflow: hidden;
}