Sujet Précédent Sujet Suivant

Effets (grisé) transparent au survol HTML 5 ,CSS3

Résolu
larose6996 Messages postés 34 Statut Membre -  
 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

A voir également:

30 réponses

  • 1
  • 2
Résumé de la discussion

Un effet de survol grisé ou transparent sur les images accompagné d’une indication textuelle est recherché pour améliorer le rendu et l’aide contextuelle. Plusieurs solutions évoquées utilisent le CSS avec une superposition semi-transparente et un texte intégré, par exemple en employant des éléments overlay et la propriété opacity pour atteindre environ 0,8. Des exemples concrets montrent l’utilisation d’un fond gris et d’un opacifiant déclenché au survol, avec des valeurs hexadécimales et des règles comme display: none/inline pour rendre l’effet conditionnel. En parallèle, certains échanges portent sur la suppression d’un cadre noir et sur l’alignement précis des marges autour des images, avec des retours à venir sur ces ajustements.

Généré automatiquement par IA
sur la base des meilleures réponses
Réponse 1 / 30
Utilisateur anonyme
 
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: 

<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>
1
Réponse 2 / 30
Utilisateur anonyme
 
salut, un truc comme ça ?

http://pour-ccm.zz.mu/

si oui, vas y tu peux pomper le code :)
0
Réponse 3 / 30
larose6996 Messages postés 34 Statut Membre
 
c'est exactement sa !

merci c'est cool...

Et si je veux changer mettre un plus blanc que gris l'effet ?
0
Réponse 4 / 30
larose6996 Messages postés 34 Statut Membre
 
c'est cool !
0
Utilisateur anonyme
 
pense à mettre résolu si tu pense que c'est ok
0

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

Posez votre question
Réponse 5 / 30
larose6996 Messages postés 34 Statut Membre
 
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>
0
Réponse 6 / 30
Utilisateur anonyme
 
salut, regarde le lien est le même
http://pour-ccm.zz.mu/
0
Utilisateur anonyme
  
<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>
0
Réponse 7 / 30
larose6996
 
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 !
0
Réponse 8 / 30
larose6996
 
Je regarde ça demain soir !
0
Réponse 9 / 30
larose6996
 
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...
0
Utilisateur anonyme
 
salut, c'est pas ce que je t'ai fait ?http://pour-ccm.zz.mu/
0
Réponse 10 / 30
larose6996
 
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>
0
Utilisateur anonyme
 
heu...prends le pas mal mais ton code ca va pas du tout. C'est quoi p1, p2 ?

hé pis ton h2 avec des liens, je comprends rien
0
Réponse 11 / 30
larose6996
 
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

}
0
Réponse 12 / 30
larose6996
 
ps; il y'a plein de truc inutile sur le css
0
Réponse 13 / 30
Utilisateur anonyme
 
je te l'ai fait là

http://pour-ccm.zz.mu/
0
Réponse 14 / 30
larose6996
 
ce serai possible de les espacer un peu plus ?
0
Utilisateur anonyme
 
oui aattends
0
Utilisateur anonyme
 
voila

en fait tu change le margin sur .block

http://pour-ccm.zz.mu/
0
Réponse 15 / 30
larose6996
 
et vous voye l'effet bleu (du lien) qui devient violet (après avoir clicker dessus) ?

cette chose horrible je voudrais l'enlever aussi
0
Utilisateur anonyme
 
attends
0
Utilisateur anonyme
 
voila http://pour-ccm.zz.mu/
0
Réponse 16 / 30
larose6996
 
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
0
Réponse 17 / 30
larose6996
 
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
0
Réponse 18 / 30
Utilisateur anonyme
 
Salut,

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|[׺°"~'"°º×
0
Réponse 19 / 30
larose6996 Messages postés 34 Statut Membre
 
je vois ça et je te tiens au courant dans l'immédiat...
0
Réponse 20 / 30
larose6996 Messages postés 34 Statut Membre
 
ok... presque parfait.

j'ai encore 2 choses à mon avis plus dure à solutionner :

1- il y a sa pic.twitter.com/cnd8L3sZc9

en gros il y a un petit trait noir sur 4 photos

2- quand je clicke sur le petit trait noir sa me fait un cadre autout et pas sur les autres
pic.twitter.com/v1Pa6lVJGw

....
0
Utilisateur anonyme
 
mais a quoi il sert ce truc noir ?
0
  • 1
  • 2

Discussions similaires

A quoi correspond cette croix sur snapchat
Sbnet -
Doucesensible -

8 réponses
Savoir si je suis bloqué par une personne sur snap chat
Jkl33 -
Vii -

10 réponses
Snap - croix grise
Thenou35210 -
Radinoz -

1 réponse
5 bips au demarage de hp
Zak12345 -
Karim -

13 réponses
Saison 5 de Kyle XY
Rose -
doudou59800 -

4 réponses