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

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.

Bobot (l'IA à votre service)
  1. 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
  2. Utilisateur anonyme
     
    salut, un truc comme ça ?

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

    si oui, vas y tu peux pomper le code :)
    0
  3. 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
  4. larose6996 Messages postés 34 Statut Membre
     
    c'est cool !
    0
    1. Utilisateur anonyme
       
      pense à mettre résolu si tu pense que c'est ok
      0

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

    Posez votre question
  6. 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
  7. Utilisateur anonyme
     
    salut, regarde le lien est le même
    http://pour-ccm.zz.mu/
    0
    1. 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
  8. 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
  10. 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
    1. Utilisateur anonyme
       
      salut, c'est pas ce que je t'ai fait ?http://pour-ccm.zz.mu/
      0
  11. 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
    1. 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
  12. 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
  13. larose6996
     
    ps; il y'a plein de truc inutile sur le css
    0
  14. Utilisateur anonyme
     
    je te l'ai fait là

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

      en fait tu change le margin sur .block

      http://pour-ccm.zz.mu/
      0
  16. 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
    1. Utilisateur anonyme
       
      attends
      0
    2. Utilisateur anonyme
       
      voila http://pour-ccm.zz.mu/
      0
  17. 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
  18. 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
  19. 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
  20. larose6996 Messages postés 34 Statut Membre
     
    je vois ça et je te tiens au courant dans l'immédiat...
    0
  21. 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
    1. 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
Apache2 accès à autre que /var/www/html/index.html
merithes -
mamiemando -

3 réponses