Sujet Précédent Sujet Suivant

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

Résolu/Fermé
larose6996 Messages postés 30 Date d'inscription mardi 31 janvier 2012 Statut Membre Dernière intervention 19 octobre 2013 - 6 oct. 2013 à 13:40
 larose6996 - 15 oct. 2013 à 12:29
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éponse 1 / 30
Utilisateur anonyme
6 oct. 2013 à 16:49
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
6 oct. 2013 à 15:22
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 30 Date d'inscription mardi 31 janvier 2012 Statut Membre Dernière intervention 19 octobre 2013
6 oct. 2013 à 16:21
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 30 Date d'inscription mardi 31 janvier 2012 Statut Membre Dernière intervention 19 octobre 2013
6 oct. 2013 à 17:06
c'est cool !
0
Utilisateur anonyme
6 oct. 2013 à 17:14
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 30 Date d'inscription mardi 31 janvier 2012 Statut Membre Dernière intervention 19 octobre 2013
6 oct. 2013 à 23:56
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
7 oct. 2013 à 09:44
salut, regarde le lien est le même
http://pour-ccm.zz.mu/
0
Utilisateur anonyme
7 oct. 2013 à 10:01 
<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
8 oct. 2013 à 08:21
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
10 oct. 2013 à 20:01
Je regarde ça demain soir !
0
Réponse 9 / 30
larose6996
12 oct. 2013 à 00:11
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
Modifié par lobotoFix le 12/10/2013 à 00:13
salut, c'est pas ce que je t'ai fait ?http://pour-ccm.zz.mu/
0
Réponse 10 / 30
larose6996
12 oct. 2013 à 00:13
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
12 oct. 2013 à 01:20
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
12 oct. 2013 à 00:14
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
12 oct. 2013 à 00:14
ps; il y'a plein de truc inutile sur le css
0
Réponse 13 / 30
Utilisateur anonyme
12 oct. 2013 à 00:14
je te l'ai fait là

http://pour-ccm.zz.mu/
0
Réponse 14 / 30
larose6996
12 oct. 2013 à 00:21
ce serai possible de les espacer un peu plus ?
0
Utilisateur anonyme
12 oct. 2013 à 00:21
oui aattends
0
Utilisateur anonyme
Modifié par lobotoFix le 12/10/2013 à 00:26
voila

en fait tu change le margin sur .block

http://pour-ccm.zz.mu/
0
Réponse 15 / 30
larose6996
12 oct. 2013 à 00:23
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
12 oct. 2013 à 00:26
attends
0
Utilisateur anonyme
12 oct. 2013 à 00:27
voila http://pour-ccm.zz.mu/
0
Réponse 16 / 30
larose6996
12 oct. 2013 à 00:28
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
12 oct. 2013 à 23:24
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
Modifié par lobotoFix le 12/10/2013 à 23:32
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 30 Date d'inscription mardi 31 janvier 2012 Statut Membre Dernière intervention 19 octobre 2013
12 oct. 2013 à 23:34
je vois ça et je te tiens au courant dans l'immédiat...
0
Réponse 20 / 30
larose6996 Messages postés 30 Date d'inscription mardi 31 janvier 2012 Statut Membre Dernière intervention 19 octobre 2013
12 oct. 2013 à 23:51
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
12 oct. 2013 à 23:55
mais a quoi il sert ce truc noir ?
0

Discussions similaires

Comment faire le symbole coeur vide/coeur blanc
Paria -
Mouloud -

59 réponses
A quoi correspond cette croix sur snapchat
Sbnet -
Lili -

6 réponses
Couleur transparente
ando26 -
Turtlee -

25 réponses
5 bips au demarage de hp
Zak12345 -
Karim -

13 réponses
Fichiers originaux de GTA V
TecNeyt -
G89 -

3 réponses