Une image "overlay" qui ne veut pas en surpasser une autre

Par Podcam, il y a 10 ans

Les bases HTML/CSS

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

duffJohn, il y a 10 ans

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.
Podcam, il y a 10 ans

Heum non j'ai pas l'impression. EN fait je voudrais quelque chose comme ça :

(en imaginant des icônes à la place des couleurs)

duffJohn, il y a 10 ans

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é.

Podcam, il y a 10 ans

Putain mais ouai ! Sauf que la photo et le background orange ne sont plus ensemble par contre :s

Podcam, il y a 10 ans

Mon cher ami je ne saurais que te remercier bien allègrement ! Tu m'ôte une épine du pied !

Podcam, il y a 10 ans

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 !

Reivax, il y a 10 ans

Là quand je regarde, y'a aucun style tes <li></li> etc...