Sujet Précédent Sujet Suivant

Où insérer le lien css?

Fermé
canvas - 14 août 2017 à 17:02
canvas Messages postés 50 Date d'inscription samedi 26 mars 2011 Statut Membre Dernière intervention 22 septembre 2023 - 17 août 2017 à 12:23
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

5 réponses

Réponse 1 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 août 2017 à 17:02
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,
1
novis
16 août 2017 à 20:55
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
0
telliak Messages postés 3667 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 4 novembre 2024 876 > novis
16 août 2017 à 21:58
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.
0
Réponse 2 / 5
canvas
15 août 2017 à 14:52
Pas d'idée?
0
sisete
16 août 2017 à 15:49
pour le hover use :hover en tant que selecteur css
0
novis > sisete
16 août 2017 à 16:07
merci pour votre réponse.
Ceci étant, pouvez-vous expliquer plus explicitement car je suis novice en informatique donc je ne comprends pas encore toutes les subtilités.
En tout cas merci pour votre aide, j'ai hâte de lire votre réponse et faire les tests...
Novis
0
Réponse 3 / 5
canvas
16 août 2017 à 11:55
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
0
Réponse 4 / 5
bg62 Messages postés 23664 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 17 décembre 2024 2 392
16 août 2017 à 21:57
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 @+
0
canvas
17 août 2017 à 11:12
vous avez raison, je vais suivre vos conseils;
j'ai fait tout cela dans les précipitations et cela semble brouillon...
canvas
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
canvas Messages postés 50 Date d'inscription samedi 26 mars 2011 Statut Membre Dernière intervention 22 septembre 2023
17 août 2017 à 12:23
inscription effectuée...
Je vais faire les choses dans l'ordre à présent;)
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
lien copié
alaurore -
LEFEUVRE -

7 réponses
ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses