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% :
<div class="code" style="min-height: 700px;">
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="http://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="http://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="http://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="http://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="http://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="http://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:
21 commentaires
Suivre le flux RSS des articles
Créer mon blog