Effets (grisé) transparent au survol HTML 5 ,CSS3 [Résolu/Fermé]

Signaler
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013
-
 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


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:

<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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 80906 internautes nous ont dit merci ce mois-ci


salut, un truc comme ça ?

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

si oui, vas y tu peux pomper le code :)
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

c'est exactement sa !


merci c'est cool...

Et si je veux changer mettre un plus blanc que gris l'effet ?
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

c'est cool !
Utilisateur anonyme
pense à mettre résolu si tu pense que c'est ok
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

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>

salut, regarde le lien est le même
http://pour-ccm.zz.mu/
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>
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 !
Je regarde ça demain soir !
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...
salut, c'est pas ce que je t'ai fait ?http://pour-ccm.zz.mu/
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>
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
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

}
ps; il y'a plein de truc inutile sur le css

je te l'ai fait là

http://pour-ccm.zz.mu/
ce serai possible de les espacer un peu plus ?
Utilisateur anonyme
oui aattends
voila

en fait tu change le margin sur .block

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


cette chose horrible je voudrais l'enlever aussi
Utilisateur anonyme
attends
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
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
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|[׺°"~'"°º×
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

je vois ça et je te tiens au courant dans l'immédiat...
Messages postés
30
Date d'inscription
mardi 31 janvier 2012
Statut
Membre
Dernière intervention
19 octobre 2013

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



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