28234 sujets

CSS et mise en forme, CSS3

[Résolu] Survol d'image / hover et transparence

Bonjour,
J'essaye desespérement de mixer deux codes, mais je n'y arrive pas.

J'ai des liens images qui fonctionne sous un système de :hover, avec variation d'opacité, et j'aurai souhaité mettre une image en arrière-plan.
En gros, lorsque l'image n'est pas survolée, on la voit avec une opacité descendue (genre 80%) avec une autre image derrière, et lorsqu'on la survole, elle devient opaque à 100% et donc on ne voit plus l'image d'arrière plan.

Voici mon code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> mammouth </title>
<link rel="shortcut icon" type="image/x-icon" href="ico.png">
<link href="../style.css" rel="stylesheet" type="text/css">
 
</head>

<body>


<p align="center">
<a class="opacity" href="#" >
<IMG src="../projets/1/1.jpg" width="200" height="160">
</a>
</p>
 

</body></html>


Et voici ma feuille de style CSS :

@charset "UTF-8";
/* CSS Document */

body 		{
	color:#333;
	font-family:"Courier New", Courier, monospace;
	font-size:12px;
	margin:0px;
				
			}		
			
			
p 			{	color:#000000;
				font-family:"Courier New", Courier, monospace;
				font-size:12px;
				margin:50px;
				padding:0px;
			}	
								
			
a.opacity {			filter:alpha(opacity=50); 
             			-moz-opacity: 0.5; 
             			opacity: 0.5;
				border:none;
			   	background-image:none;
				text-decoration:none;
				color:#000000;
				font-size:9px;
				font-weight:none;
				text-decoration:none;
				margin:10px;
				line-height:0px;
				padding-right:0px;
				padding-left:0px;
				padding-bottom:0px;
				padding-top:0px;
				}

a.opacity:hover {	        filter:alpha(opacity=100);   
				-moz-opacity: 1.0;   
				opacity: 1.0;
				border:none;
				background-image:none;
				text-decoration:none;
				color:#000000;
				font-size:9px;
				font-weight:bold;
				margin:10px;
				line-height:0px;
				padding-right:0px;
				padding-left:0px;
				padding-bottom:0px;
				padding-top:0px;
				}
				   
.opacity:hover {
 				background-image:url(fond.gif);
				}
.opacity {
 				background-image:url(fond.gif);
				}


J'ai trouvé un code qui me permet de superposer deux images comme je le souhaite, mais je n'arrive pas à mixer les deux codes :

<div class="box" style="width:230px;height:200px">
<img class="imgback" src="images/imgback.jpg" width="230px" height="200px">
<img class="imgtop" src="images/imgtop.jpg" width="230px" height="200px">
</div>

et
.box
{
  position:relative;
}
.imgtop, .imgback
{
  position:absolute;
  top:0;
  left:0;
}
.imgtop
{
  z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);	
}


Merci beaucoup pour votre aide Smiley biggrin Smiley confused
Modifié par mammouth44 (04 Mar 2013 - 20:42)
Bonjour,

Voulez-vous quelque chose comme ça : 

<section>
<img src="http://lorempixel.com/200/200" >
</section>
<section>
</section>


section + section {
	width: 200px;
	height: 200px;
	background-color: #33F;
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px;
	opacity: 0.5;
	transition: opacity 1s ease 0s;
}
section+section:hover{
	opacity:1;
}
Désolé c'est de la syntaxe html5.

N'y faites pas attention et changez les noms des balises comme vous le souhaitez.
Modifié par rodolpheb (03 Mar 2013 - 19:49)
Bonjour,
Merci pour votre aide, mais avec ce code, il ne se passe rien.

J'aimerai que mon image "fond.gif" apparaisse en arrière-plan de mon image "1.jpg" (opacité 80%), et qu'au passage de la souris, l'image "1.jpg" soit en opacité 100% et que l'on ne voit plus l'image d'arrière plan.

Une idée ?
Bonjour,
Merci rodolpheb pour cet exemple astucieux.
Avec ce css on recouvre d'un voile coloré une seule image avec une position bien précise.
Peut-on faire la même chose au survol de toutes les images de la page, quelle que soit leur position respective, et avec un seul div couleur?
Ou peut-on superposer au survol un pixel coloré transparent png en mettant une class au hover ?
Je recherche un effet de survol couleur pour les vignettes d'un slider jquery appelant chacune un overlay.
Merci de votre aide.
Bonjour,

Il faudrait voir le code (une page en ligne ?), mais a priori, ça ne devrait pas être trop compliqué à mettre en œuvre Smiley cligne
Hello,
Je vais me répondre à moi-même… Et à ceux que ça pourrait intéresser après moi.
Après avoir fouillé un peu plus loin, voici la solution trouvée sur Alsacréation:
http://forum.alsacreations.com/topic-4-17183-1.html
Pour des vignettes servant à afficher un agran jquery ('Highslide' par ex) on met une class signifiant que le fond de l'élément parent (ici la balise href) a un fond bleu, puis on joue sur l'opacité de l'élément enfant (l'image).
Concrètement:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Filtre bleu au survol</title>



<style>
* {padding: 0; margin:0;}

.roll img {
  opacity: 1.0;
  filter:alpha(opacity=100);
  border:0;
  }

.roll:hover img {
  opacity: 0.5;
  filter:alpha(opacity=50); 
   border:0; 
   }

a.roll {
	display: -moz-inline-box;
	display: inline-block;
}

.roll:hover {
  background:#33F;
}
</style>
</head>

<body>

<a href="#" class="roll"><img src="http://lorempixel.com/200/200" ></a>
<a href="#" class="roll"><img src="http://lorempixel.com/200/200" ></a>
<a href="#" class="roll"><img src="http://lorempixel.com/200/200" ></a>

</body>
</html>


Super gain de temps plutôt que de faire 2 images rollover…
Merci MrPatate et Alan pour leurs réponses à ce topic de 2006 !
Sujet clos
Aller à