Zoom sur images vers la droite

[Lino]

Bonjour,
j'essaie de remettre mon site à jour avec Kompozer.
je souhaite revoir la mise en page de la page suivante, ou plus précisément l'effet de zoom sur les images de droite, l'effet à gauche me convient parfaitement.
http://terredenacre.pagesperso-orange.fr/Pieces.html
J'aimerai que l'effet de zoom s'effectue sur la gauche pour les images de droite uniquement de façon, à venir effleurer celle de gauche.
Suis-je assez clair, je l'espère.
Merci de votre aide
Lino

[Ymai]

Bonjour
La solution
http://sapajou.be/test.html
peut-elle convenir?
Le cas échéant, des explications sont-elles nécessaires?

[Lino]

Whouaa...
Super, mieux que ce que je souhaitais, merci Ymai
Sympa l'ombre
Quelques explication ne seront pas de refus, cela fait bien longtemps que je n'ai pas retouché au CSS.
D'avance merci
Lino

[Ymai]

Très (trop) rapidement...
Chaque ensemble de deux images disposées horizontalement est placé dans un conteneur (conteneur générique div).
Ce conteneur est affecté de la "class" nommée "milieu".
Dans l'éditeur de styles, j'affecte diverses propriétés à ce conteneur:
- largeur (à calculer)
- marge automatique (pour le centrage)
- hauteur (à calculer en fonction du contenu possible)
Dans ce conteneur, je place l'image de gauche et lui affecte une petite taille (200px de haut). KompoZer ne semble pas trop aimer qu'on impose seulement la hauteur. Je le force en mode "Mixte" et en supprimant la mention de la largeur.
Sur cette image gauche, je place un lien
Sélectionner l'image > Insertion > Lien
pour éviter des soucis, le lien peut être "javascript:void(0)", c'est-à-dire une fonction Javascript qui ne fait rien. Attention, dans l'original, problème quand on clique...
À la balise <a>, j'attribue la "class" nommée "gauche" (clic droit dans la barre d'état, Propriétés avancées, Attributs HTML > classe > gauche
Dans la feuille de styles, j'introduis une règle pour le sélecteur .gauche
> flottant à gauche

Après, même chose mais symétriquement pour l'image droite.
Je ne reviens plus sur le a:hover img qui semble acquis ;o)

Il y a largement moyen de fignoler.

[Lino]

merci de ta réponse,
je vais travailler d’arrache-pied suivant tes indications, mais mon initiation aux CSS remonte à ... NVU
En cas de pbl, je remonterai le post pour quelques éclaircissements si tu le veux bien.
Bonne soirée
Lino

[Lino]

Me revoilou,
J'ai tâtonné pas mal, et puis... les vacances sont passées par là, mais j'y suis arrivé (pas vraiment de façon "académique" ).
J'aurai aimé faire des ombres comme toi Ymai, style Box-Shadow, mais je n'ai rien trouvé dans CSS et en recopiant ton code source, rien ne s'affiche.
Étonnant, non, ferrai-je une mauvaise manip ?
Si tu as une piste Ymai, ou quelqu'un d'autre, je serai preneur.
Merci d'avance pour votre précieux concours.
Amicalement

http://terredenacre.pagesperso-orange.f ... lages.html

[Ymai]

Bonjour
Comme la page a été conçue, il faut attribuer

Code : Tout sélectionner

box-shadow: 1px 5px 12px white;

à l'objet
.droite
et non à
.droite img

.droite img signifie l'objet "image" qui se trouve dans un bloc dont la "class" est "droite"
dans la page présentée, l'image est elle-même affectée de la "class" droite. Elle n'est pas un élément d'un bloc "droite".

Et j'ai bien écrit "white", parce qu'une ombre grise sur fond gris...
Mais je ne suis pas sûr que l'effet d'ombre soit très heureux. Peut-être en chipotant un peu les paramètres? A voir avec la doc correspondante.