Partage

Zoom sur image

12 février 2018 à 18:06:30

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 :colere:

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

12 février 2018 à 18:10:43

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... ;)

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
12 février 2018 à 18:13:12

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

12 février 2018 à 18:31:38

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

14 février 2018 à 11:25:53

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... ;)






Zoom sur image

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown