Effets (grisé) transparent au survol HTML 5 ,CSS3
Résolu
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
30 réponses
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.
-
salut, un truc comme ça ?
http://pour-ccm.zz.mu/
si oui, vas y tu peux pomper le code :)
-
c'est exactement sa !
merci c'est cool...
Et si je veux changer mettre un plus blanc que gris l'effet ? -
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> -
c'est cool !
-
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/
-
<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... -
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> -
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 ?
-
et vous voye l'effet bleu (du lien) qui devient violet (après avoir clicker dessus) ?
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 -
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|[׺°"~'"°º× -
je vois ça et je te tiens au courant dans l'immédiat...
-
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
....
- 1
- 2
Suivant
