background-image hover css issue

I am trying to have a simple mouse hover effect on those two pictures but it doesn't work. Could someone help me?

I would need a fade transition when the mouse is over the pictures. Thank you very much!

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;
    
    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);
   
    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');	
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:after {
	background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
	background-size: cover;
	width:50vmin;
	height: 100vmin;
	float:left;
	opacity:0;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#right-content:after {
	background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
	background-size: cover;
	width:50vmin;
	height: 100vmin;
	float:right;
	opacity:0;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:hover:after {
	opacity:1;
}
#right-content:hover:after {
	opacity:1;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style_intro.css">
</head>

<body>
<div class="body">
  <div class="square">
    <div class="content">
	<a href="http://www.google.com"><div id="left-content"></div></a>
	<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</div>
</body>
</html>

Solution

Use content:''; in psuedo-elements to display the element

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;
    
    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);
   
    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');	
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:after {
	background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
	background-size: cover;
	width:50vmin;
	height: 100vmin;
	float:left;
	opacity:0;
  content:'';
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#right-content:after {
	background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
	background-size: cover;
	width:50vmin;
	height: 100vmin;
	float:right;
	opacity:0;
  content:'';
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:hover:after {
	opacity:1;
}
#right-content:hover:after {
	opacity:1;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style_intro.css">
</head>

<body>
<div class="body">
  <div class="square">
    <div class="content">
	<a href="http://www.google.com"><div id="left-content"></div></a>
	<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</div>
</body>
</html>