JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img_projektowanie" style="opacity: 1;">&nbsp;</div>
<div id="img_id" style="opacity: 0;">&nbsp;</div>
<div id="img_prepress" style="opacity: 0;">&nbsp;</div>
<div id="img_proj">&nbsp;</div>
<div id="img_foto">&nbsp;</div>
<h1>PROJEKTOWANIE GRAFICZNE</h1>
<ul>
<li><a id="l1" href="/DYNAMITE/projektowanie" title="Projektowanie logo i materiałów identyfikacyjnych">identyfikacja wizualna dla firm </a></li>
<li><a id="l2" href="/DYNAMITE/projektowanie" title="prepress - przygotowanie do druku">przygotowanie do druku</a></li>
<li><a id="l3" href="/DYNAMITE/projektowanie" title="projekty dla poligrafii">projektowanie dla poligrafii – od wizytówki <br>przez ulotkę do billboardu</a></li>
<li><a id="l4" href="/DYNAMITE/projektowanie" title="profesjonalna obróbka fotografii">retusz, montaż, obróbka zdjęć</a></li>
</ul>

CSS

.img_projektowanie{
	width:300px;
	height:113px;
	background:url('http://4.bp.blogspot.com/-CJjfS1fLI4I/T-mog_jnJ_I/AAAAAAAARZw/5mq_gKlONGY/s200/eldesastredemaria.blogspot.com+pngnofamosos+(63).png') 0 0 no-repeat;
}

#img_id{
	width:300px;
	height:113px;
	position:absolute;	background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png) 0 0 no-repeat;
	opacity:0;
	top:0;
	left:0;	
}
#img_prepress{
	width:300px;
	height:113px;
	position:absolute;
	background:url(http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png) 0 0 no-repeat;
	opacity:0;
	top:0;
	left:0;	
}
#img_proj{
	width:300px;
	height:113px;
	position:absolute;
	background:url(https://upload.wikimedia.org/wikipedia/commons/8/8a/Wikinews-logo.png) 0 0 no-repeat;
	opacity:0;
	top:0;
	left:0;	
}
#img_foto{
	width:300px;
	height:113px;
	position:absolute;
	background:url(http://images.sixrevisions.com/2010/11/17-20_search_png24.png) 0 0 no-repeat;
	opacity:0;
	top:0;
	left:0;	
}

JavaScript

// JavaScript Document

var $j = jQuery.noConflict();




$j(init1);
function init1() {
    $j(document).ready(function(){
	$j("#l1").mouseover(function(){
	$j(".img_projektowanie").animate({opacity:'0'});
	$j("#img_id").animate({opacity:'1'});
 	});
  $j("#l1").mouseout(function(){
	  $j("#img_id").animate({opacity:'0'});
    $j(".img_projektowanie").animate({opacity:'1'});
  });
});
    }
	
$j(init2);
function init2() {
    $j(document).ready(function(){
	$j("#l2").mouseover(function(){
	$j(".img_projektowanie").animate({opacity:'0'});
	$j("#img_prepress").animate({opacity:'1'});
 	});
  $j("#l2").mouseout(function(){
   $j(".img_projektowanie").animate({opacity:'1'});
		$j("#img_prepress").animate({opacity:'0'});
		
  });
});
    }
	
	
$j(init3);
function init3() {
    $j(document).ready(function(){
	$j("#l3").mouseover(function(){
	$j(".img_projektowanie").animate({opacity:'0'});
	$j("#img_proj").animate({opacity:'1'});
 	});
  $j("#l3").mouseout(function(){
   $j(".img_projektowanie").animate({opacity:'1'});
		$j("#img_proj").animate({opacity:'0'});
		
  });
});
    }

$j(init4);
function init4() {
    $j(document).ready(function(){
	$j("#l2").mouseover(function(){
	$j(".img_projektowanie").animate({opacity:'0'});
	$j("#img_foto").animate({opacity:'1'});
 	});
  $j("#l2").mouseout(function(){
   $j(".img_projektowanie").animate({opacity:'1'});
		$j("#img_foto").animate({opacity:'0'});
		
  });
});
    }