JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<body>
<ul class="menu">
<li><a class="home" href="#">главная</a></li>
<li><a class="company" href="#">компания</a></li>
<li><a class="contact" href="#">контакты</a></li>
</ul>
</body>

CSS

* {margin:0; padding:0; list-style:none; text-decoration:none;}
body {background:url('http://www.zastavki.com/pictures/originals/2014/_It_is_true_wallpaper_088689_.jpg') center center no-repeat;
background-size:cover; width: 100vw; height: 100vh; text-align:center; font-size:0;}
.menu {padding-top:50px;}
.menu li{display:inline-block;}
.menu a{display:inline-block; padding:10px; background:rgba(0,0,0,.5); font-size:18px; color:#fff;}
.menu a:hover {background:#000;}
.menu a:after {position:absolute; width: 100vw; height: 100vh; top:0; left:0; z-index:-1; opacity:0; content:'';
background-color:rgba(255,0,0,.5); transition: opacity 0.5s; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.menu a:hover:after {opacity:1; transition: opacity 0.5s;}

.home:after{background-image:url(http://i.imgur.com/HTjPyhj.jpg);}
.company:after{background-image:url(http://i.imgur.com/9NuNMlX.jpg);}
.contact:after{background-image:url(http://i.imgur.com/CXunV0f.jpg);}