Faire apparaître du texte au survol de l'image de la catégorie
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Faire apparaître du texte au survol de l'image de la catégorie
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lombredelondres.forum2jeux.com/forum
Description du problème
Bonjour,Mon problème est simple mais cela fait déjà des heures et des heures que j'écume ce forum, les tutoriels, le net en entier pour trouver une réponse et que je ne trouve pas de solution qui fonctionne vraiment.
J'aimerai, tout simplement, changer l'apparence de mon forum et mettre, pour chaque catégorie, une grande image qui va s'effacer au passage de la souris pour laisser voir une description.
Exactement comme sur ce forum (apparemment souvent montré par les admin en mal de cette forme de code).
http://www.animal-crossing.org/
Html, css...que faire?
Merci beaucoup d'avance!
Mon forum: http://lombredelondres.forum2jeux.com/forum
Dernière édition par Comte Kei le Ven 27 Fév 2015 - 10:03, édité 1 fois
Re: Faire apparaître du texte au survol de l'image de la catégorie
Bonjour,
il y a de nombreuses façons de faire, en voilà une :
Essayez avec ce code en description :
Et collez ce code dans votre css :
Le principe : on a une div avec une image de fond, contenant le bloc de texte qui est positionné par dessus mais invisible, on ne voit donc que l'image. Quand on passe la souris sur la div, le bloc de texte est rendu visible.
il y a de nombreuses façons de faire, en voilà une :
Essayez avec ce code en description :
- Code:
<div class="desc_img" style="background-image:url(URL DE L'IMAGE ICI);">
<div class="frm_desc">
LA DESCRIPTION ICI
</div>
</div>
Et collez ce code dans votre css :
- Code:
div.desc_img {
width:400px; /*largeur description*/
height:75px; /*hauteur description*/
background-size: cover;
position: relative; /*pour pouvoir positionner le texte au dessus*/
}
div.frm_desc {
width:390px; /*hauteur description*/
height: 65px; /*hauteur description*/
padding: 5px; /*marge intérieure*/
overflow: auto; /*barre de défilement automatique*/
background: grey; /*couleur de fond de la description*/
position: absolute; /*pour placer par rapport au bloc desc*/
top:0; /*position verticale*/
left:0; /*position horizontale*/
opacity:0; /*invisible ne tems normal*/
transition: opacity 1s ease; /*effet de transition*/
}
div.frm_desc:hover {
opacity:1; /*visible au survol*/
}
Le principe : on a une div avec une image de fond, contenant le bloc de texte qui est positionné par dessus mais invisible, on ne voit donc que l'image. Quand on passe la souris sur la div, le bloc de texte est rendu visible.
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire apparaître du texte au survol de l'image de la catégorie
Bonjour!
Merci pour votre réponse! Je vais garder votre méthode bien précieusement.
Mais à force de chercher j'ai aussi trouvé cette technique-là (peut-être que ça en intéressera certains).
Code css à placer dans la feuille css (couleurs):
Code hml à placer dans la description de la catégorie:
Ça fonctionne de mon côté!
Merci beaucoup!
Merci pour votre réponse! Je vais garder votre méthode bien précieusement.
Mais à force de chercher j'ai aussi trouvé cette technique-là (peut-être que ça en intéressera certains).
Code css à placer dans la feuille css (couleurs):
- Code:
.hey { opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}
.hey:hover {opacity: 0.9;}
Code hml à placer dans la description de la catégorie:
- Code:
<style> .hey { opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;; } .hey:hover {opacity: 0.8; -webkit-filter: blur(0px); }
</style>
<div style="background: url('URL DE VOTRE IMAGE'); width: 400px; height: 100px;">
<div class="hey" ;="">
<div style="background: #070707; height: 100px; ">
<div style="padding: 10px; font: 12px cambria; text-align: justify; height: 100px; overflow: auto; line-height: 12px; ">
DESCRIPTION DE LA CATEGORIE
</div>
</div>
</div>
</div>
<style> .hey { opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;; } .hey:hover {opacity: 0.9; -webkit-filter: blur(0px); }
</style>
Ça fonctionne de mon côté!
Merci beaucoup!
Sujets similaires
» Recherche Code ( Cliquer / faire apparaître un texte ).
» Faire apparaitre les boutons "editer" ; "citer" ; "ip" ; etc au survol
» Faire glisser une image pour faire apparaitre un texte.
» Comment faire apparaitre une catégorie?
» Faire apparaître une catégorie en un clic
» Faire apparaitre les boutons "editer" ; "citer" ; "ip" ; etc au survol
» Faire glisser une image pour faire apparaitre un texte.
» Comment faire apparaitre une catégorie?
» Faire apparaître une catégorie en un clic
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum