Bonjour,

Je suis actuellement en développement d'un site amateur pour un projet de Terminal. Dans mon site, j'ai des images, et je veux que celles-ci ce zooms au passage de la souris (avec si possible un effet de grisage pour les images où on passe pas la souris, mais c"est optionnel). J'ai regardé sur internet par si par là, j'ai trouvé plusieurs sites (dont celui-ci), mais le problème, c'est que quand je copie le code, la mise en page de mon site devient "bordélique", les images restent pas à leur place

Voilà, j’espère que vous allez m'éclaircir ! Et si vous avez des codes plus clairs comme exemples.

Bonjour,

Je te laisse regarder deux sujets traités très récemment :

Pour les effets de zoom au survol (je donnais même des exemple) : https://openclassrooms.com/forum/sujet/survol-particulier-dimages-en-tant-que-lien-html

Pour appliquer un filtre sur les éléments non survolés : https://openclassrooms.com/forum/sujet/agir-sur-tout-les-elements-sauf-celui-survole

A toi de voir comment combiner tout cela, tu as déjà plus que les bases pour y arriver seul...

Restez connecté, ton problème sera bientôt resolu mon ami MathieuDcrmnt

envoi tes codes sources stp

Voici un exemple:

 
codes html
<p id="afficher">[&#9650;]salut! merci pour votre visite voici comment je me transforme
  </p>

Codes css
#afficher
{
opacity: 0.8;/*transparence*******/

background : #106b64;
border: 1px solid  white;
border-radius: 3px;
font-size: 1.3em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
height: 8%;
width: 45%;
margin-left: 34%;

}
#afficher:hover
{
    background : white;
opacity: 0.8;/*transparence*******/
color:white;	
z-index: 3;	
border: 2px solid  #34495e;
color:  #34495e;
transform: skewX(15deg) skewY(15deg);
}

ou encore pour zoom avant voici les deuxième codes css:

codes css pour zoomer avant

#afficher
{
opacity: 0.8;/*transparence*******/

background : #106b64;
border: 1px solid  white;
border-radius: 3px;
font-size: 1.3em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
height: 8%;
width: 45%;
margin-left: 34%;

}
#afficher:hover
{
    background : white;
opacity: 0.8;/*transparence*******/
color:white;	
z-index: 3;	
border: 2px solid  #34495e;
color:  #34495e;

transform: scale(1.25);
}

-
Edité par chris katameya 12 février 2018 à 18:42:41

Voi:chris katameya a écrit:

Restez connecté, ton problème sera bientôt resolu mon ami MathieuDcrmnt

envoi tes codes sources stp

-
Edité par chris katameya il y a 15 minutes

Voilà, suffisant ? Ou j'envoie encore plus de codes

[EDIT 13/02/2018 10:50]

J'ai rentré les 2 codes CSS que vous avez envoyés (je les ai testé 1 par 1 évidemment), mais j'ai toujours ma mise en page qui fait n'importe quoi

Peut-être le fait que ça soit mis dans un tableau ? Ou faut-il revoir une autre mise en page, ce qui me semble moins probable tout de même

*Ici, code vierge sans les div

 
<table frame="border" cellpadding="8">
			<tr> 
				<td>	
						<img src="Affiches\scott.gif" width="250"> &nbsp; &nbsp; &nbsp; &nbsp;
						<img src="Affiches\star.gif" width="250"> &nbsp; &nbsp; &nbsp; &nbsp;
						<img src="Affiches\titanic.gif" width="250"> &nbsp; &nbsp; &nbsp; &nbsp;					
				</td>
			</tr>
		</table>

-
Edité par MathieuDcrmnt 13 février 2018 à 10:56:19

Re.

J'ai toujours mon problème de mise en page, j'ai pourtant essayer divers solutions, mais rien à faire :/

Peut-être est-ce le fait que je sois dans un tableau ?

Mewen_bzh a écrit:

Bonjour,

Je te laisse regarder deux sujets traités très récemment :

Pour les effets de zoom au survol (je donnais même des exemple) : https://openclassrooms.com/forum/sujet/survol-particulier-dimages-en-tant-que-lien-html

Pour appliquer un filtre sur les éléments non survolés : https://openclassrooms.com/forum/sujet/agir-sur-tout-les-elements-sauf-celui-survole

A toi de voir comment combiner tout cela, tu as déjà plus que les bases pour y arriver seul...