Bonjour, bonsoir !

Alors j'ai utilisé un tutoriel (je l'ai trouvé sur css-actif) pour faire un effet hover et il marche à merveille, c'est celui-ci.

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;}

<div style="background: url('http://24.media.tumblr.com/tumblr_mbjozmbI2O1rivdjwo1_250.gif');width: 200px;"><div class="hey";><div style="background: #fff; height: 200px;"><div style="padding: 10px; font: 10px cambria; text-align: justify;height: 200px; overflow: auto; line-height: 12px; ">Bon bah vous êtes trop forts !</div></div></div></div>

Mais j'aimerais utiliser cette technique pour une fiche de présentation sauf que je me heurte à un problème et j'ai beau me tortiller la tête et avoir fait des essais, j'y arrive pas. Est-ce possible de changer le statut de l'image ? Passer de background à img scr ?

Merci à ceux qui me répondront ♥

A un moment tu as un ";" qui se promène on sait pas trop pourquoi xD. Il faut enlever le ; ^^

Code:

<div class="hey";>

Sinon, j'ai pas trop compris ce que tu veux faire >o<. Éventuellement peut être un petit schéma (: ?

Ah, je m'explique mieux et un schéma je peux pas faire vu que c'est au niveau du code >< L'image est insérée grâce à la balise background mais j'aimerais savoir si on peut le changer pour img src parce que, je m'explique : suivant les images que les membres vont mettre, ils vont peut-être perdre une partie de l'image à moins qu'ils changent toutes les dimensions eux-mêmes, si ce n'est pas pratique et qui favorise les erreurs.

Est-ce possible de mettre un img src, de mettre une largeur fixe mais qu'ensuite le hover s'adapte automatique à la hauteur de l'image (sans qu'on ait besoin de changer les dimensions) ?

Oui c'est possible, mais il va falloir adapter un peu le code

Sinon, il y a une méthode un peu plus rapide :

Code:

<div style="background: url('http://lorempixel.com/600/500/cats/') no-repeat;width: 200px;background-size:contain;">
   <div class="hey">
      <div style="background: #fff; height: 200px;">
         <div style="padding: 10px; font: 10px cambria; text-align: justify;height: 200px; overflow: auto; line-height: 12px; ">Bon bah vous êtes trop forts !
         </div>
      </div>
   </div>
</div>

J'ai rajouté un peu de code dans le style de la première div :

Code:

<div style="background: url('http://lorempixel.com/600/500/cats/') no-repeat; width: 200px;background-size:contain;">

J'ai rajouté une propritée background-size (je t'invite à lire ceci) avec pour valeur contain, puis pour éviter que l'image de fond se répète, j'ai mis la valeur "no-repeat" à background.

Dis moi si cela te conviendrait

J'ai mis en place ton code et voilà ce que ça me fait  

Spoiler:

Je retire ce que j'ai dis, en fait c'est mon code qui fait beuger. Par contre j'ai comme même un problème. Le hover (même en changeant la hauteur) ne va pas jusqu'en haut de l'image et au contraire dépasse largement vers le bas

Après test, sur une page HTML toute seule il n'y a aucun problème.
Le souci est qu'en postant le code dans un topic, ForumActif rajoute automatiquement des br pour faire des retours à la ligne. Il faudrait donc essayer un peu comme ça:

Code:

<div style="background: url('http://hcd-1.imgbox.com/adoaaena.png?st=8P_n5uA9fZZAiv3CI6VhNQ&e=1373642762') no-repeat;width: 200px;background-size:contain;"><div class="hey">   <div style="background: #fff; height: 200px;"><div style="padding: 10px; font: 10px cambria; text-align: justify;height: 200px; overflow: auto; line-height: 12px; ">Bon bah vous êtes trop forts !</div></div></div></div>

Je pense cela devrait régler le problème

Ah là c'est bon, le hover est bien placé  J'ai juste une petite question encore et ensuite, je t'embête plus promis ! Du coup, la hauteur du hover ne s'ajuste pas automatiquement comme la largeur ? Il faut le faire manuellement

Effectivement, c'est l'un des problèmes, je sais pas du tout comment régler ça :/

Il y a une autre méthode, sinon, si tu veux que la case fasse toujours 200px X 200px, le problème c'est que parfois on ne verra plus l'image en entier :/

Ca serait de remplacer le background : contain par un background : cover et de centrer le background.
En gros ça donnerait :

Code:

<div style="background: url('http://24.media.tumblr.com/tumblr_mbel3sHGCs1rviwqzo1_500.gif') no-repeat;width: 200px;background-size:contain;"><div class="hey">  <div style="background: #fff; height: 200px;"><div style="padding: 10px; font: 10px cambria; text-align: justify;height: 200px; overflow: auto; line-height: 12px; ">Bon bah vous êtes trop forts !</div></div></div></div>

Voici comment rend l'image avec contain :


Voici un exemple de comment ça pourrait rendre avec cover (+ on centre le background) :


Voilà je te laisse faire ton choix

Si on avait remplacé le background par une image, ça aurait fait le même problème

En fait, je vais garder le premier effet que tu as fait  Ca correspond le plus à ce que je souhaitais au départ  Merci