Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: novis le le 17-08-2017 a 16:48:05

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.