Bonjour,
J'ai un problème au niveau de la gestion de mes images produits. J'aimerais que ceux-ci s'affichent comme présentés sur cette page http://www.blnprdkt.com/?fond=page1.html
le code HTML étant le suivant
<ul>
<li class="imageWrapper">
<img src="template/img/1.jpg" alt="" />
<a href="#" class="cornerLink">
<p>BPT001 - 39 euros</p>
</a>
</li>
</ul>
Je n'arrive malheureusement pas à intégrer celui-ci dans les boucles thelia, dont voici l'exemple http://www.blnprdkt.com/?fond=rubrique&id_rubrique=2
<ul>
<THELIA_PROD type="PRODUIT" rubrique="#RUBRIQUE_ID" classement="manuel">
<li class="imageWrapper">
<T_IMAGE>
<THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="221" largeur="170">
<img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
</THELIA_IMAGE>
</T_IMAGE>
<img src="./template/_gfx/no-image.png" alt="Pas d'image disponible" />
<//T_IMAGE>
<a href="#URL" class="cornerlink" >
<p>#TITRE</p>
</a>
</li>
</THELIA_PROD>
</ul>
Et voici le code CSS qui gère les effets
.imageWrapper {
position: relative;
width: 230px;
height: 307px;
margin:0 6px 0 0;
}
.imageWrapper_r {
position: relative;
width: 230px;
height: 307px;
}
.imageWrapper img,.imageWrapper_r img {
display: block;
width: 230px;
height: 307px;
}
.imageWrapper .cornerLink, .imageWrapper_r .cornerLink {
opacity: 0;
position: absolute;
width: 230px;
height: 307px;
bottom: 0px;
left: 0px;
right: 0px;
padding: 2px 0px;
color: #ffffff;
font-weight:bold;
background: #000000;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.imageWrapper:hover .cornerLink , .imageWrapper_r:hover .cornerLink {
opacity: 0.6;
height: 307px;
}
.order_bottom{
text-align: bottom;
}
Quelqu'un pourrait-il m’éclairer ?
Merci d'avance
Last edited by mlayerm (01-05-2013 15:10:17)