Menu-image avec légende

19.05.2014

Suite à une demande sur le fourum Ekla, voici un menu sous forme de mur d'images,
avec liens et légende au survol curseur. Ici le mur est réduit à 2 colonnes,
mais il peut s'élargir sur 3 ....(zoomer/dézoomer avec le navigateur ctrl+molette)
Pour voir sur une page entière cliquer ici.
Pour modifier la largeur du mur-image, modifier la valeur de "width" ici = 80% :

Parametric Lab

Accueil
Parametric Lab

Contact
Parametric Lab

Lab
Parametric Lab

Projets
Parametric Lab

Cours
Parametric Lab

Divers

Codes HTML-CSS

<!-----Ajuster la valeur de width (ci-dessous à 60%) pour obtenir 2 ou 3 colonnes----->
<div class="container-a4"  style="width: 60%;min-height:700px;margin: 0 auto;">
		<ul class="caption-style-4">
			<li>
				<img src="https://ekladata.com/CO1Nhq4mPDb115c4NKVIA4MgIq0.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Parametric Lab</h1>
						<p><a href="http://parametriclab.eklablog.com/accueil-c25080856">Accueil</a></p>
					</div>
				</div>
			</li>
			<li>
				<img src="https://ekladata.com/F0IBCVzSV1DQrN4zajiBR7hPR1A.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Parametric Lab</h1>
						<p><a href="http://parametriclab.eklablog.com/contact">Contact</a></p>
					</div>
				</div>
			</li>
			<li>
				<img src="https://ekladata.com/5-iwwB9Ai2s04IYMvny0dGng6I4@300x225.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Parametric Lab</h1>
						<p><a href="http://parametriclab.eklablog.com/lab-c25110128">Lab</a></p>
					</div>
				</div>
			</li>
			<li>
				<img src="https://ekladata.com/ewQ4bJB3-KZYglsQPNQhvJ15LEk@300x225.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Parametric Lab</h1>
						<p><a href="http://parametriclab.eklablog.com/projets-c25110132">Projets</a></p>
					</div>
				</div>
			</li>
			<li>
				<img src="https://ekladata.com/WK8HNK5P6AWihSOVBh-xZe-xRTc@300x225.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Parametric Lab</h1>
						<p><a href="http://parametriclab.eklablog.com/cours-c25110136">Cours</a></p>
					</div>
				</div>
			</li>
			<li>
				<img src="https://ekladata.com/tLBTcIb91F811qnEcHL0dw6EvXI@300x225.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Parametric Lab</h1>
						<p><a href="http://parametriclab.eklablog.com/accueil-c25080856">Divers</a></p>
					</div>
				</div>
			</li>
		</ul>
	</div></div>

See the Pen Menu image avec légende by Mike (@mikegmz) on CodePen.

source: