Titre: insérer cadre avec effet hover sur image
Posté par: novis le le 17-08-2017 a 16:48:05
Bonjour;
J'ai crée un texte qui apparait au survol de la souris.
Je souhaiterai désormais insérer un rectangle qui apparait lors du survol de la souris comme présenté dans l'effet oscar de la page:
http://epicadesign.fr/demos/HoverEffectImg/index.html
J'ai cherché comment insérer ce code, mais je n'y parviens pas.
Quelqu'un pourrait-il m'aider et me dire quel code insérer en css pour crée cet effet.
Merci d'avance
Novis |
Titre: Re:insérer cadre avec effet hover sur image
Posté par: tof73 le le 17-08-2017 a 21:43:18
figure.effect-oscar:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58,52,42,0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}
soit le code avec :hover
en reprenant le css et le code html de la page, il n'y a pas de raison que cela ne marche pas. |
Titre: Re:insérer cadre avec effet hover sur image
Posté par: novis le le 17-08-2017 a 22:32:30
Merci de votre réponse,
Cependant je suis novice donc je vais certainement vous poser une question bête...
Le code que vous venez de me donner est le code à intégrer au css.
Quel est donc le code à intégrer au html sans reprendre toutes les donner qui ne sont pas utiles?
(pardon pour la question, je crains quelle soit bateau mais bon... temps que je n'ai pas compris... je préfère demander)
Merci d'avance
Novis |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|