JSFiddle - React, Tailwind, and code Playground

by Laetiparis

HTML

<section id="realisations"> 

<h1>Quelques projets </h1>

<div class="container">

	<div class="projet">
		<a href="#fullprojet">
			<img src="images/projet1.png" alt="Projet 1">
			<div class="couleur"><span>Projet Saturne</span></div>
			<div id="fullprojet"></div>
		</a>
	</div><!--mettre lien vers détail projet-->

	<div class="projet">
		<a href="">
			<img src="images/projet2.png" alt="Projet 2">
			<div class="couleur"><span>Projet Mars</span></div>
		</a>
	</div>

	<div class="projet">
		<a href="">
			<img src="images/projet3.png" alt="Projet 3">
			<div class="couleur"><span>Projet Lune</span></div>
		</a>
	</div>

	<div class="projet">
		<a href="">
			<img src="images/projet2.png" alt="Projet 4">
			<div class="couleur"><span>Projet Jupiter</span></div>
		</a>
	</div>

	<div class="projet">
		<a href="">
			<img url="images/projet3.png" alt="Projet 5">
			<div class="couleur"><span>Projet Uranus</span></div>
		</a>
	</div>

	<div class="projet">
		<a href="">
			<img src="images/projet1.png" alt="Projet 6">
			<div class="couleur"><span>Projet Univers</span></div>
		</a>
	</div>

</div> <!-- fin de la div.container -->



</section>

CSS

#realisations{
	/* height: 800px;*/
	padding-top: 40px; /* 15  */
	/*background-color: silver;*/
}

#realisations h1{
	padding-top: 38px; 
	padding-right: 5%;
	padding-left: 80px; 
	/*margin-bottom: 4%;*/
	color: #EB0999;
}

#realisations div.container{
	border: 0px solid black;
	/*height: 900px;*/
	margin-top: 0px;
	padding-top: 0px; 
	padding-bottom: 30px; 
	text-align: center;	
}


#realisations div.projet{
	border: 0px solid red;
	display: inline-block;
	margin: 10px 10px; 
	position: relative;
}

#realisations div.projet img{
	width: 280px;  /* 300 */
	height: 280px; /* 300 */
}

.couleur {
	width: 280px;/* 300 */
	height: 280px; /* 300 */
	position: absolute;
	top : 0;
	left: 0;
	background-image: url('http://placekitten.com/280/280');
	background-size: 280px; /* 300 */
	background-repeat: no-repeat;
	background-position: center 0px;
	display: none;

}

#realisations div.projet:hover .couleur {
	display: block;

}

#realisations span{
	font-size: 1.3em;
	display: block;
	padding-top: 110px;
	color: white;
	font-weight: lighter;
}

#fullprojet {
	width: 500px;
	height: 700px; 
	background-color: silver;
	position: absolute;
	display: none;
}


#realisations div.projet a:active{
	 
	display: block;

}