Faire apparaître du texte au survol de l'image de la catégorie

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire apparaître du texte au survol de l'image de la catégorie

Message par Comte Kei Ven 27 Fév 2015 - 0:02

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
Comte Kei

Comte Kei
Nouveau membre

Féminin
Messages : 15
Inscrit(e) le : 11/02/2014

http://lombredelondres.forum2jeux.com/forum
Comte Kei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître du texte au survol de l'image de la catégorie

Message par MlleAlys Ven 27 Fév 2015 - 0:33

Bonjour,
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 oui l'image est en fond Wink )
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*/
}
Les valeurs sont réglables évidemment, et le code peut être comlété avec le reste de la mise en forme. ^^

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

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire apparaître du texte au survol de l'image de la catégorie

Message par Comte Kei Ven 27 Fév 2015 - 10:02

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:
.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!
Comte Kei

Comte Kei
Nouveau membre

Féminin
Messages : 15
Inscrit(e) le : 11/02/2014

http://lombredelondres.forum2jeux.com/forum
Comte Kei a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum