La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  insérer cadre avec effet hover sur image
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: insérer cadre avec effet hover sur image  (Lu 5441 fois)
insérer cadre avec effet hover sur image
« sur: le 17-08-2017 a 16:48:05 »
novis
Membre récent
*

Hors-Ligne

Messages: 4





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  

Re:insérer cadre avec effet hover sur image
« Répondre #1 sur: le 17-08-2017 a 21:43:18 »
tof73
P'tit nouveau
**

Hors-Ligne

Messages: 79





Voir le Profil    WWW
Répondre avec citation

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.

Rapporter au modérateur  
Re:insérer cadre avec effet hover sur image
« Répondre #2 sur: le 17-08-2017 a 22:32:30 »
novis
Membre récent
*

Hors-Ligne

Messages: 4





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2020 - Tous droits réservés

creation site internet strasbourg