Effets (grisé) transparent au survol HTML 5 ,CSS3
Résolu
larose6996
Messages postés
30
Date d'inscription
Statut
Membre
Dernière intervention
-
larose6996 -
larose6996 -
Bonjour,
Je voudrais changer/améliorer 2 paramètres à changer :
- au survol un effet grisé/transparent des images + une indication textuel
help me please
ps, j'ai laissé un lien pour que vous voyer l'effet que je voudrais mettre en place
pic.twitter.com/5tSR68kD6a
Je voudrais changer/améliorer 2 paramètres à changer :
- au survol un effet grisé/transparent des images + une indication textuel
help me please
ps, j'ai laissé un lien pour que vous voyer l'effet que je voudrais mettre en place
pic.twitter.com/5tSR68kD6a
A voir également:
- Effets (grisé) transparent au survol HTML 5 ,CSS3
- Editeur html - Télécharger - HTML
- Croix grise snap - Forum Snapchat
- Html br ✓ - Forum Webmastering
- Savoir si je suis bloqué par une personne sur snap chat ✓ - Forum Snapchat
- Espace html - Astuces et Solutions
30 réponses
salut, je me suis pas ennuyé j'ai mit background-color: grey;
tu veux du blanc tu remplace grey par white.
Si tu veux être plus précis, tu peux mettre une écriture hexadécimale
tout en bas de la page ici http://www.jokconcept.net/codes-couleurs-hexdecimal.php
tu met avec le #
par exemple le blanc est #FFFFFF
c'est plus précis ainsii
pour l'opacité opacity: 0.8;
1 = opaque
0 = transparent
je met le code pour les autres car le liens est éphemere:
tu veux du blanc tu remplace grey par white.
Si tu veux être plus précis, tu peux mettre une écriture hexadécimale
tout en bas de la page ici http://www.jokconcept.net/codes-couleurs-hexdecimal.php
tu met avec le #
par exemple le blanc est #FFFFFF
c'est plus précis ainsii
pour l'opacité opacity: 0.8;
1 = opaque
0 = transparent
je met le code pour les autres car le liens est éphemere:
<style type="text/css">
#content {
width: 960px;
margin: auto;
position: relative;
}
.block {
width: 300px;
height: 300px;
position: relative;
display: inline-block;
}
img {
width: 300px;
height: 300px;
position: absolute;
}
.opac {
width: 300px;
height: 300px;
position: absolute;
background-color: grey;
opacity: 0.8;
z-index: 10;
display: none;
}
p {
text-align: center;
font-size: 1.5em;
margin-top: 80px;
}
.block:hover > .opac {
display: inline;
}
</style>
</head>
<body>
<div id="content">
<div class="block">
<div class="opac">
<p>
texte image 1
</p>
</div>
<img src="image0.jpg" alt="" />
</div>
<div class="block">
<div class="opac">
<p>
texte image 2
</p>
</div>
<img src="image1.jpg" alt="" />
</div>
<div class="block">
<div class="opac">
<p>
texte image 3
</p>
</div>
<img src="image2.jpg" alt="" />
</div>
</div>
</body>
c'est exactement sa !
merci c'est cool...
Et si je veux changer mettre un plus blanc que gris l'effet ?
merci c'est cool...
Et si je veux changer mettre un plus blanc que gris l'effet ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonsoir,
encore
cela fait 5heure que je me bats et je n'y arrive pas.
C'est exactement l'effet que je cherche à obtenir... mais je n'y arrive pas
Est ce que tu pourrais m'indiquer où je dois l'ajouter dans ce code là ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>laroseetsonblog</title>
</head>
<body>
</br>
<div class="conteneur"
<p2>
<a href="Société.html" ><img src="Société.jpg" class="société" alt="société" width="210" height="180" </a>
<a href="Monde.html" > <img src="Monde.jpg" class="monde" alt="monde" width="210" height="180"</a>
<a href="photo.html" > <img src="Politique.jpg" class="Politique" alt="politique" width="210" height="180"</a>
<a href="film.html" > <img src="Economie.jpg" class="economie" alt="economie" width="210" height="180"</a> </br>
<a href="sport.html" > <img src="surfeur.png" class="surfeur" alt="surfeur1" </a>
<a href="formule1.html" > <img src="high-tech.jpg" class="high-tech" alt="high-tech" width="210" height="180"</a>
<a href="facebook.html" > <img src="cinema.jpg" class="cinema" alt="cinema" width="210" height="180"</a>
<a href="star.html" > <img src="people.jpg" class="people" alt="people" width="210" height="180"</a>
</p2>
</div>
</body>
</html>
encore
cela fait 5heure que je me bats et je n'y arrive pas.
C'est exactement l'effet que je cherche à obtenir... mais je n'y arrive pas
Est ce que tu pourrais m'indiquer où je dois l'ajouter dans ce code là ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>laroseetsonblog</title>
</head>
<body>
</br>
<div class="conteneur"
<p2>
<a href="Société.html" ><img src="Société.jpg" class="société" alt="société" width="210" height="180" </a>
<a href="Monde.html" > <img src="Monde.jpg" class="monde" alt="monde" width="210" height="180"</a>
<a href="photo.html" > <img src="Politique.jpg" class="Politique" alt="politique" width="210" height="180"</a>
<a href="film.html" > <img src="Economie.jpg" class="economie" alt="economie" width="210" height="180"</a> </br>
<a href="sport.html" > <img src="surfeur.png" class="surfeur" alt="surfeur1" </a>
<a href="formule1.html" > <img src="high-tech.jpg" class="high-tech" alt="high-tech" width="210" height="180"</a>
<a href="facebook.html" > <img src="cinema.jpg" class="cinema" alt="cinema" width="210" height="180"</a>
<a href="star.html" > <img src="people.jpg" class="people" alt="people" width="210" height="180"</a>
</p2>
</div>
</body>
</html>
<style type="text/css">
#content {
width: 960px;
margin: auto;
position: relative;
}
.block {
width: 210px;
height: 180px;
position: relative;
display: inline-block;
}
img {
width: 210px;
height: 180px;
position: absolute;
}
.opac {
width: 210px;
height: 180px;
position: absolute;
background-color: white;
opacity: 0.8;
z-index: 10;
display: none;
}
p {
text-align: center;
font-size: 1.5em;
margin-top: 80px;
}
.block:hover > .opac {
display: inline;
}
</style>
</head>
<body>
<div id="content">
<a href="Société.html" >
<div class="block">
<div class="opac">
<p>
texte image 1
</p>
</div>
<img src="Société.jpg" class="société" alt="société" />
</div></a>
<a href="Monde.html" >
<div class="block">
<div class="opac">
<p>
texte image 2
</p>
</div>
<img src="Monde.jpg" class="monde" alt="monde" />
</div></a>
<a href="photo.html" >
<div class="block">
<div class="opac">
<p>
texte image 3
</p>
</div>
<img src="Politique.jpg" class="Politique" alt="politique" />
</div></a><a href="film.html" >
<div class="block">
<div class="opac">
<p>
texte image 4
</p>
</div>
<img src="Economie.jpg" class="economie" alt="economie" />
</div></a><a href="sport.html" >
<div class="block">
<div class="opac">
<p>
texte image 5
</p>
</div>
<img src="surfeur.png" class="surfeur" alt="surfeur1" />
</div></a><a href="formule1.html" >
<div class="block">
<div class="opac">
<p>
texte image 6
</p>
</div>
<img src="high-tech.jpg" class="high-tech" alt="high-tech" />
</div></a><a href="facebook.html" >
<div class="block">
<div class="opac">
<p>
texte image 7
</p>
</div>
<img src="cinema.jpg" class="cinema" alt="cinema" />
</div></a><a href="star.html" >
<div class="block">
<div class="opac">
<p>
texte image 8
</p>
</div>
<img src="people.jpg" class="people" alt="people" />
</div></a>
</div>
</body>
Bonjour,
j'ai une semaine chargée...
Je regarde tous ça en fin de semain ou mercredi.
Je vous tiens au courant
Dans tous les cas merci !
j'ai une semaine chargée...
Je regarde tous ça en fin de semain ou mercredi.
Je vous tiens au courant
Dans tous les cas merci !
Salut,
encore 3h de perdue !
Je suis vraiment nulle...
Je veux absolument obtenir l'effet sur cette photo
pic.twitter.com/5tSR68kD6a
...c'est pour la page d'acceuil de mon site
Je veux que :
1- les photos soient centrées comme sur les photos
2- les photos me dirigent vers une autre page
3- au survol des photos un effet grisé/transparent et apparition de texte apparaisse
Help me I'm a loser...
encore 3h de perdue !
Je suis vraiment nulle...
Je veux absolument obtenir l'effet sur cette photo
pic.twitter.com/5tSR68kD6a
...c'est pour la page d'acceuil de mon site
Je veux que :
1- les photos soient centrées comme sur les photos
2- les photos me dirigent vers une autre page
3- au survol des photos un effet grisé/transparent et apparition de texte apparaisse
Help me I'm a loser...
voici mon code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style1.css" />
<title>le site de la rose</title>
</head>
<body>
<p1> <h2> <a href="Société.html"> Société </a> <a href="Monde.html"> Monde </a> <a href="Politique.html">
Politique </a> <a href="Economie.html"> Economie </a> <a href="Sport.html"> Sport </a> <a href="High-Tech.html"> High-Tech <a/>
<a href="Cinéma.html"> Cinéma </a> </h2> <a href="People.html"> People <a/> </p1>
</br>
<div class="conteneur"
<p2>
<a href="Société.html" > <img src="Société.jpg" class="société" alt="société" width="210" height="180" </a>
<a href="Monde.html" > <img src="Monde.jpg" class="monde" alt="monde" width="210" height="180"</a>
<a href="Politique.html" > <img src="Politique.jpg" class="Politique" alt="politique" width="210" height="180"</a>
<a href="Economie.html" > <img src="Economie.jpg" class="economie" alt="economie" width="210" height="180"</a> </br>
<a href="sport.html" > <img src="surfeur.png" class="surfeur" alt="surfeur1" </a>
<a href="high-tech.html" > <img src="high-tech.jpg" class="high-tech" alt="high-tech" width="210" height="180"</a>
<a href="Cinéma.html" > <img src="cinema.jpg" class="cinema" alt="cinema" width="210" height="180"</a>
<a href="People.html" > <img src="people.jpg" class="people" alt="people" width="210" height="180"</a>
</p2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style1.css" />
<title>le site de la rose</title>
</head>
<body>
<p1> <h2> <a href="Société.html"> Société </a> <a href="Monde.html"> Monde </a> <a href="Politique.html">
Politique </a> <a href="Economie.html"> Economie </a> <a href="Sport.html"> Sport </a> <a href="High-Tech.html"> High-Tech <a/>
<a href="Cinéma.html"> Cinéma </a> </h2> <a href="People.html"> People <a/> </p1>
</br>
<div class="conteneur"
<p2>
<a href="Société.html" > <img src="Société.jpg" class="société" alt="société" width="210" height="180" </a>
<a href="Monde.html" > <img src="Monde.jpg" class="monde" alt="monde" width="210" height="180"</a>
<a href="Politique.html" > <img src="Politique.jpg" class="Politique" alt="politique" width="210" height="180"</a>
<a href="Economie.html" > <img src="Economie.jpg" class="economie" alt="economie" width="210" height="180"</a> </br>
<a href="sport.html" > <img src="surfeur.png" class="surfeur" alt="surfeur1" </a>
<a href="high-tech.html" > <img src="high-tech.jpg" class="high-tech" alt="high-tech" width="210" height="180"</a>
<a href="Cinéma.html" > <img src="cinema.jpg" class="cinema" alt="cinema" width="210" height="180"</a>
<a href="People.html" > <img src="people.jpg" class="people" alt="people" width="210" height="180"</a>
</p2>
</div>
</body>
</html>
et mon code css
p
{
color: blue;
font-family: Trebuchet MS
}
h1
{
color: black;
font-size: 40px;
}
h2, em
{
color: black; /* SA c'est une balise pour rappelez un commentaire sur l'attribut donné par ex */
text-align: center
}
.introduction
{
color: brown;
font-size: xx-large;/*il y aussi large et medium*/
}
.salutations
{
color: black;
font-size: xx-small;
}
.etoui
{
color; black;
font-size: 15em; /*d'autres balise à virgule mais attention il faut écrire un point "."*/
}
.dro
{
float: left
border:2px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
p1
{
font-family: Courier
}
p2
{
font-family: Courier
}
.deepinside
{
float: left
-moz-border-radius:10000000000000000000001px;
-webkit-border-radius:100000000000000000000001px;
border-radius:70000000000000000000000px;
}
body
background-image: url("texture verte.jpg");
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:10px;
}
body
{
background-color:white;
border: 2px solid white;
padding:5px;
-moz-border-radius:10px ;
-webkit-border-radius:10px;
border-radius:10px ;
}
a /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: white;
}
a:hover /* Apparence au survol des liens */
{
color: white
}
.conteneur
{
text-align: center
}
p
{
color: blue;
font-family: Trebuchet MS
}
h1
{
color: black;
font-size: 40px;
}
h2, em
{
color: black; /* SA c'est une balise pour rappelez un commentaire sur l'attribut donné par ex */
text-align: center
}
.introduction
{
color: brown;
font-size: xx-large;/*il y aussi large et medium*/
}
.salutations
{
color: black;
font-size: xx-small;
}
.etoui
{
color; black;
font-size: 15em; /*d'autres balise à virgule mais attention il faut écrire un point "."*/
}
.dro
{
float: left
border:2px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
p1
{
font-family: Courier
}
p2
{
font-family: Courier
}
.deepinside
{
float: left
-moz-border-radius:10000000000000000000001px;
-webkit-border-radius:100000000000000000000001px;
border-radius:70000000000000000000000px;
}
body
background-image: url("texture verte.jpg");
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:10px;
}
body
{
background-color:white;
border: 2px solid white;
padding:5px;
-moz-border-radius:10px ;
-webkit-border-radius:10px;
border-radius:10px ;
}
a /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: white;
}
a:hover /* Apparence au survol des liens */
{
color: white
}
.conteneur
{
text-align: center
}
et vous voye l'effet bleu (du lien) qui devient violet (après avoir clicker dessus) ?
cette chose horrible je voudrais l'enlever aussi
cette chose horrible je voudrais l'enlever aussi
pic.twitter.com/ih51wRgQU6 je t'ai fait une capture d'écran du site...
mais pas besoin de te presser parce que après 3 heures j'ai les yeux injectés de sang...
au dodo
en tout cas merci beaucoup c'est vraiment sympa d'aider comme ça !
encore merci
mais pas besoin de te presser parce que après 3 heures j'ai les yeux injectés de sang...
au dodo
en tout cas merci beaucoup c'est vraiment sympa d'aider comme ça !
encore merci
On y est presque... ouf !
je voudrais juste...
1- je ne sais pas si tu vois mais il y a comme un cadre Noir autour des photos
j'aimerais le supprimer (ne pas avoir de cadre noir).
2- le cadre blanc ne se cale pas parfaitement sur la photo...
j'aimerais qu'il colle parfaitement au cadre...
Merci beaucoup
à tout de suite
je voudrais juste...
1- je ne sais pas si tu vois mais il y a comme un cadre Noir autour des photos
j'aimerais le supprimer (ne pas avoir de cadre noir).
2- le cadre blanc ne se cale pas parfaitement sur la photo...
j'aimerais qu'il colle parfaitement au cadre...
Merci beaucoup
à tout de suite
Salut,
pour la 1 c'est parce que tu es sous explorer.
essaye :
pour la 2
tu joue avec la position absolute (top, right, bottom, left ) et des valeur en pixel
si tu veux descendre de 10 px, tu fait top : 10px;
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
pour la 1 c'est parce que tu es sous explorer.
essaye :
a div.block img {
border: 0;
}
pour la 2
tu joue avec la position absolute (top, right, bottom, left ) et des valeur en pixel
si tu veux descendre de 10 px, tu fait top : 10px;
.opac {
width: 210px;
height: 180px;
position: absolute;
top : 10px;
background-color: white;
opacity: 0.8;
z-index: 10;
display: none;
}
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×