JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ikkuna" id="ikkuna1">
</div>
<div class="ikkuna" id="ikkuna2">
</div>
<div class="ikkuna" id="ikkuna3">
</div>
<div class="ikkuna" id="ikkuna4">
</div>

CSS

html {
	height: 100%;
	background: #ccc;
}
#ikkuna1 {
	left: 5%;
	top: 10%;
	right: 55%;
	bottom: 60%;
}
#ikkuna2 {
	left: 55%;
	top: 10%;
	right: 5%;
	bottom: 60%;
}
#ikkuna3 {
	left: 5%;
	top: 55%;
	right: 55%;
	bottom: 10%;
}
#ikkuna4 {
	left: 55%;
	top: 55%;
	right: 5%;
	bottom: 10%;
}
.ikkuna {
  	background: white;
	  position: absolute;
}
#ikkuna1:hover {
  	background: url('http://www.itu.int/en/council/cwg-cop/PublishingImages/Pages/consultation-nov2015/cop%20presentation%202.jpg');
    background-size: 100% 100%;
}
#ikkuna2:hover {
  	background: url('https://image.freepik.com/free-photo/color-daisy-picture-material_38-5925.jpg');
    background-size: 100% 100%;
}
#ikkuna3:hover {
  	background: url('http://kingofwallpapers.com/picture/picture-008.jpg');
    background-size: 100% 100%;
}
#ikkuna4:hover {
  	background: url('https://image.freepik.com/free-photo/big-red-roses-picture-material_38-5932.jpg');
    background-size: 100% 100%;
}