JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>

	<div class=href1 href=#>HISTORICAL STYLES</div> 
	<div class=href2 href=#>NATURE 1</div>
	

	
</body>

CSS

body{
	position:relative;
	margin:0 auto;
	width:1000px;
}


.href1, .href2, {
	position:absolute;
	
}

.href1{
	line-height:100px;
	right:0;
	top:60px;
	width:709px;
	color:white;
	height:473px;
	background:url(http://altair-f.hol.es/1_1.jpg);
	background-size:cover;
	
	transition: background 5s ease;
}

.href1:hover{background:url(http://altair-f.hol.es/1.jpg)}

.href2{
	right:709px;
	top:220px;
	width:300px;
	height:300px;
	background:url(http://altair-f.hol.es/2.jpg);
	background-size:300px;
	background-position:center;

	transition: background 5s ease;
}

.href2:hover{background-size:700px}