Hello tout le monde,
Je me permet de venir chercher un peu d'aide. Sur mon site communautaire est mise en place une vitrine permettant de visiter des profils. Cela ressemble à ça : http://webpodcasteurs.fr/?q=page/vitrine-des-cha-nes-vid-o-jeu-vid-o. Cela fonctionne très bien mais depuis peu j'ai besoin que des icônes viennent se superposer à l'image qui glisse, et ça, je n'y arrive pas, malgré de nombreux essais. En fait, j'aurai just besoin qu'on puisse voir un ou des logos, par exemple dans la partie orange sous la photo.
Mon code actuel
Le fonctionnement de cette vitrine se base sur du html/css. Le Css définit les cadres et la position de l'image, le html sert evidemment au texte et à l'insertion de la liste (PS : je suis sur drupal)
CSS :
li.contenant {
width:160px;
height:160px;
overflow: hidden;
background: #ff8410;
display: inline-block;
margin-left: 20px;
margin-bottom: 15px;}
div.contenu {
color: white;
font-size: 14px;
text-align: left;
margin-left: 13px;
margin-top: -7px;
width: 145px;
height: 145px;
overflow: auto;
}
.contenant img {
width:125px;
height:125px;
border: 25px solid #ff8410;
position: relative;
bottom: 165px;
transition: 0.5s;
margin-left: -6px;
}
.contenant:hover img {
bottom: 350px;
transition: 0.5s; }Et voici le HTML :
<li class="contenant"><a href="http://webpodcasteurs.fr/?q=utilisateur/rurlys">
<div class="contenu"><p>Rurlys :<br/>Vidéos gaming, émission sur les mangas, vidéos plus expérimentales et de la merde gratuite (oui, oui!).</div><img src="chaînes/rurlys.png" /></div></a></li>
<li class="contenant"><a href="http://webpodcasteurs.fr/?q=utilisateur/fio">
<div class="contenu">Fio' :<br/>Un mélange de moi et de la SFPD, des conneries, des boulettes, du beau jeu, et toujours des boulettes.</div>
<img src="chaînes/fio.jpg" /></div></a></li>
<li class="contenant"><a href="http://webpodcasteurs.fr/?q=utilisateur/lucalecalu">
<div class="contenu">Lucalecalu :<br/>Vidéos de Gameplay commentées. Chaîne spécialisée pour les jeux sur consoles Sony et PC.</div>
<img src="chaînes/lucalecalu.jpg" /></div></a></li>
<li class="contenant"><a href="http://webpodcasteurs.fr/?q=utilisateur/bamako123channel">
<div class="contenu">Bamako & Headthom :<br/>Nous essayons d'etre varié, on fais des playthrough, tuto, explication, comentary, Beta-Test.</div>
<img src="chaînes/bamako123channel.jpg" /></div></a></li>
<li class="contenant"><a href="http://www.webpodcasteurs.fr/?q=utilisateur/koinzell3e#">
<div class="contenu">Koinzell3e :<br/>Vidéaste, joueur, "graphiste"à mes heures perdues. Bref je touche un peu à tout ^^</div>
<img src="chaînes/koinzell3e.jpg" /></div></a></li>
<li class="contenant"><a href="http://www.webpodcasteurs.fr/?q=utilisateur/margoulax">
<div class="contenu">Margoulax :<br/>Vidéos débats utilisant le JV comme "vecteur" et non comme une simple passion (sauf parfois).</div>
<img src="chaînes/margoulax.png" /></div></a></li>
<li class="contenant"><a href="http://www.webpodcasteurs.fr/?q=utilisateur/spidercat">
<div class="contenu">Culture of Gamers :<br/>Etre la pour s'amuser avec mes abonnés et amis.</div>
<img src="chaînes/spidercat.png" /></div></a></li>
<li class="contenant"><a href="http://www.webpodcasteurs.fr/?q=utilisateur/elsy">
<div class="contenu">Elsy :<br/>Une petite patate sur des jeux vidéos et qui rage ça peut être drôle à regarder en live.</div>
<img src="chaînes/elsy.png" /></div></a></li>
</ul>```
### Quand je fais des tests
De tous les nombreux tests que j'ai pu faire, j'ai l'impression surtout que la nouvelle class que je créais avec du mal à être lue par le html, ce qui faisait que quand la photo de profil remonte et disparaît, et bien c'est le logo qui apparaît et cache le texte ..
Voilà, j'espère être à peu près clair :s. De toute façon je répondrai à toute vos questions ;)
9 réponses
Tu parles de la bordure orange ?
Une petite modif pour régler ça : http://codepen.io/dezineup/pen/QNYWGa
:)
Salut
tu peux utiliser after en css.
Par exemple :
width: 50px;
height: 50px;
position: absolute;
background: url('http://www.cssdebutant.com/css3.jpg') center no-repeat;
bottom: 0;
right: 0;
z-index: 10;
background-size: cover;```
Après je ne sais pas si c'est vraiment ce que tu veux faire.Heum non j'ai pas l'impression. EN fait je voudrais quelque chose comme ça :
(en imaginant des icônes à la place des couleurs)
Ah oui plusieures dans ce cas ce n'est pas la meme chose effectivement un pseudo element ne peu pas etre utilisable dans ce cas désolé.
Putain mais ouai ! Sauf que la photo et le background orange ne sont plus ensemble par contre :s
Mon cher ami je ne saurais que te remercier bien allègrement ! Tu m'ôte une épine du pied !
Mince alors, même en changeant les class pour éviter tout conflit avec mon css, voilà ce que j'obtiens : http://webpodcasteurs.fr/?q=page/page-test ... à part un conflit je ne vois pas le problème, mais j'ai beau changer les class en des noms alambiqués ça ne change rien. AUrais-tu une idée, c'est encore plus frustrant de voir le résultat que j'escomptais, mais pas sur mon site haha !