Où insérer le lien css?
canvas
-
canvas Messages postés 51 Statut Membre -
canvas Messages postés 51 Statut Membre -
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
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,-
Bonjour Pitet,
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- Salut,
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.
-
-
-
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 -
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 @+
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
inscription effectuée...
Je vais faire les choses dans l'ordre à présent;)
