Tweet
Bonjour à tous et à toutes,
suite à une précédente question sur un autre forum, j'ai su comment coder des vignettes : http://codepen.io/EmmanuelB/pen/XJJBrw
Seulement j'ai une image de 350 px sur 350 px, le code (avec quelques modififications) marche parfaitement avec mon éditeur de texte Brackets.
Cependant le cadre ne s'adapte pas avec Joomla et Gantry 5 (exemple).
Voilà comment j'ai intégré le code sur joomla :
-ajout du code html après la création d'un module; contenu personnalisé
-ajout du code css dans le custom css de Gantry 5
Je suis perdu, voici le code que j'ai inclus :
-html
-css
Pour conclure, ma question est comment adapter le cadre à l'image sur Joomla ?
J'espère avoir été le plus clair possible, je vous remercie d'avance pour l'aide que vous allez m'apporter.
suite à une précédente question sur un autre forum, j'ai su comment coder des vignettes : http://codepen.io/EmmanuelB/pen/XJJBrw
Seulement j'ai une image de 350 px sur 350 px, le code (avec quelques modififications) marche parfaitement avec mon éditeur de texte Brackets.
Cependant le cadre ne s'adapte pas avec Joomla et Gantry 5 (exemple).
Voilà comment j'ai intégré le code sur joomla :
-ajout du code html après la création d'un module; contenu personnalisé
-ajout du code css dans le custom css de Gantry 5
Je suis perdu, voici le code que j'ai inclus :
-html
Code:
<div class="box"> <div class="box__content"><img class="box__image" src="images/vignette/vignette_350px.png" alt="" /></div> <div class="box__caption"> <div class="box__title"><img class="box__icon" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/XBox_360.png" alt="" /> Mob Ruled</div> <div class="box__description"><strong>T-Bone:</strong> Complete 20 Chicago South Club contracts</div> </div> </div> <div> </div>
Code:
body {
background: #0e0e0e;
font: 400 16px/1.5em "Segoe Ui", Arial, sans-serif;
}
.box {
width: 350px;
margin: 60px auto;
position: relative;
overflow: hidden;
border: 4px solid #fff;
}
.box__image {
display: block;
}
.box__icon {
display: inline-block;
vertical-align: bottom;
height: 40px;
margin-right: 5px;
}
.box__caption {
position: absolute;
color: #fff;
left: 0;
right: 0;
bottom: 0;
top: 270px;
background: rgba(0,0,0,.7);
transition: top .4s ease-in-out;
}
.box__title {
font-size: 3em;
font-weight: 100;
line-height: 1;
padding: 20px;
}
.box__description {
position: absolute;
padding: 20px 0;
border-top: 1px solid #fff;
left: 20px;
right: 20px;
}
.box:hover .box__caption {
top: 0;
transition: top .3s ease-in-out;
}
J'espère avoir été le plus clair possible, je vous remercie d'avance pour l'aide que vous allez m'apporter.
Commentaire