Où insérer le lien css?
canvas
-
canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
canvas Messages postés 50 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite créer un effet hover sur une de mes images.
J'ai trouvé ce site qui donne les codes html et css mais l'effet hover ne fonctionne pas.
https://www.queness.com/post/16216/create-different-styles-of-hover-effects-with-css3-only
Pourtant j'insère le code html dans ma page html et le code css dans ma page css. Ensuite je dois ajouter le lien de ma page css dans ma page html et c'est peut-être là que je fais une erreur.
Dois-je le mettre entre les deux derniers <div>? Au début de ma page? à la fin?
Bref, je ne sais pas et je ne comprends pas pourquoi cela ne fonctionne pas.
J'adorerais comprendre, merci d'avance à celui ou celle qui voudra bien m'éclairer
canvas
Je souhaite créer un effet hover sur une de mes images.
J'ai trouvé ce site qui donne les codes html et css mais l'effet hover ne fonctionne pas.
https://www.queness.com/post/16216/create-different-styles-of-hover-effects-with-css3-only
Pourtant j'insère le code html dans ma page html et le code css dans ma page css. Ensuite je dois ajouter le lien de ma page css dans ma page html et c'est peut-être là que je fais une erreur.
Dois-je le mettre entre les deux derniers <div>? Au début de ma page? à la fin?
Bref, je ne sais pas et je ne comprends pas pourquoi cela ne fonctionne pas.
J'adorerais comprendre, merci d'avance à celui ou celle qui voudra bien m'éclairer
canvas
A voir également:
- Où insérer le lien css?
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Insérer video powerpoint - Guide
- Insérer signature word - Guide
- Insérer liste déroulante excel - Guide
5 réponses
Salut,
Pour lier le css à ton html, on recommande idéalement d'utiliser un fichier css externe et de lier ce fichier css au document html via la balise link située dans la balise head :
https://developer.mozilla.org/fr/docs/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_%3Clink%3E
Bonne journée,
Pour lier le css à ton html, on recommande idéalement d'utiliser un fichier css externe et de lier ce fichier css au document html via la balise link située dans la balise head :
https://developer.mozilla.org/fr/docs/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_%3Clink%3E
Bonne journée,
Bonjour,
J'ai beau retourner le problème dans tous les sens, je ne comprends pas.
J'insere ce code dans mon html:
<div class="grid">
<figure class="effect-oscar">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Warm <span>Oscar</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
<a href="#" rel="nofollow noopener noreferrer" target="_blank">View more</a>
</figcaption>
</figure>
</div>
puis celui-ci dans mon css:
figure.effect-oscar{background:-webkit-linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%)}
figure.effect-oscar img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .35s}
figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}
figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-oscar figcaption::before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(0);transform:scale(0)}
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:.4}
et là, j'insère le scipt référent css dans ma page html mais l'effet hover ne fonctionne pas!
Faut-il ajouter un code dans le <head>?
Merci de votre aide
Canvas
J'ai beau retourner le problème dans tous les sens, je ne comprends pas.
J'insere ce code dans mon html:
<div class="grid">
<figure class="effect-oscar">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Warm <span>Oscar</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
<a href="#" rel="nofollow noopener noreferrer" target="_blank">View more</a>
</figcaption>
</figure>
</div>
puis celui-ci dans mon css:
figure.effect-oscar{background:-webkit-linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%)}
figure.effect-oscar img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .35s}
figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}
figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-oscar figcaption::before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(0);transform:scale(0)}
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:.4}
et là, j'insère le scipt référent css dans ma page html mais l'effet hover ne fonctionne pas!
Faut-il ajouter un code dans le <head>?
Merci de votre aide
Canvas
Lut;)
Cela commence à devenir assez compliqué pour parvenir à t'aider ....
Tu utilises plusieurs pseudos différents, tu poses des questions assez confuses et répétitives souvent et, mieux, tu incrustes des "réponses" sous un autre pseudo dans ta propre demande = à cette allure là ça va foirer .... :)
Essaies au moins de prendre le temps de t'inscrire, de placer ensuite une demande d'ordre assez 'général' dans laquelle tu pourras exposer et suivre tes différents problèmes, ce sera ainsi bien mieux pour tous ;)
bon courage
et @+
Cela commence à devenir assez compliqué pour parvenir à t'aider ....
Tu utilises plusieurs pseudos différents, tu poses des questions assez confuses et répétitives souvent et, mieux, tu incrustes des "réponses" sous un autre pseudo dans ta propre demande = à cette allure là ça va foirer .... :)
Essaies au moins de prendre le temps de t'inscrire, de placer ensuite une demande d'ordre assez 'général' dans laquelle tu pourras exposer et suivre tes différents problèmes, ce sera ainsi bien mieux pour tous ;)
bon courage
et @+
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
En lisant le document que tu me conseilles , il me semble que c'est ce que je fais.
Je copie le code dans mon html:
<div class="grid">
<figure class="effect-oscar">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Warm <span>Oscar</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
<a href="#" rel="nofollow noopener noreferrer" target="_blank">View more</a>
</figcaption>
</figure>
</div>
puis le code dans css:
figure.effect-oscar{background:-webkit-linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%)}
figure.effect-oscar img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .35s}
figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}
figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-oscar figcaption::before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(0);transform:scale(0)}
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:.4}
et là je fais le lien du code css sur ma page html
<link href="http://www.mon adresse_effet-oscar.css" rel="stylesheet" type="text/css" />
Je ne comprends toujours pas...
Merci de votre aide
Novis
Ce que tu fournis est trop imprécis pour que l'on t'aide : ta CSS ne s'appelle sûrement pas http://www.mon adresse_effet-oscar.css" rel="stylesheet.
On n'a pas son nom, on ne sait pas où elle est enregistrée, on ne sait pas où est le code HTML, ni ce qu'il contient, on ne sait pas s'il y a des erreurs etc.