JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<div id="container">
 

  
   
   
   <div id="cf2">
    <img class="bottom" src="http://www.vgtv.fr/22.jpg" />
    <img class="top" src="http://www.vgtv.fr/11.jpg" /></div> 
         
   <div id="content">  
     <p><a href="#" class="bouton" id="cf_onclick">
      changer l'image</a>
     </p>
     <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.
       
       Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
       
       Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum. </p>
     <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.
       
       Ego vero sic intellego, Patres conscripti,...

CSS

#container{
	width:1100px;
	margin:0 auto;
			
}


#cf2 {
  position:relative;
  width:1000px;
    height:1000px;
	margin:0 auto;

}


#cf2 img {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	top: 1px;
}

#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}


#content{
	width:90%;
	margin:0 auto;	
	margin-top:30px;
}


@media all and (max-width: 1100px)
{

#container {
	width: auto;
	}
	
	img {
	max-width: 100%;
	height: auto;
}


#cf2 {
  position:relative;
  width:100%;
    //height:auto;
	margin:0 auto;

}

	
	
}

JavaScript

$(document).ready(function() {
   $("#cf_onclick, #cf2 img.top").click(function() {
     $("#cf2 img.top").toggleClass("transparent");
   });
 });