Agrandir une image sans popup.

Bonjour à tous,

J'aurais souhaité votre aide concernant un problème qui me casse la tête.

Je suis en train de faire un site (avec les moyens du bord), pour petre honnête c'est ma première fois.

Je vais vous donner le lien : http://www.yba-creation.com/

Dans la partie "collections" je souhaite afficher 3 images dont la taille a été réduite pour entrer dans le "design" (si l'on peut dire ...)

J'ai vu sur ce lien : http://www.cssplay.co.uk/menu/lightbox.html

Que quand on passe la souris sur une image, elle s'agrandie.

Je souhaiterais obtenir le même effet, mais je n'ai pas compris comment y arriver.

Pouvez-vous m'éclairer sur celà ?

Merci d'avance

Bonsoir

C'est un très bon exemple que tu donnes là http://www.cssplay.co.uk/menu/lightbox.html

Si tu affiches le code source de la page la réponse est dedans.

Voici les lignes en question :

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}


.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

Quelques explication :
Pour réaliser l'effet que tu désires, on définit la taille des images,
puis dans une deuxième instruction on définit la taille des images (plus grande) au survole de celles-ci grâce au pseudo format a:hover.

Pour que cela marche il faut que tes images soit compris dans des liens.

Bonsoir morgan13z,

Je te renvoie à la réponse de Florent V. faite il y a peu de temps (à partir de "Mon conseil:")
Une recherche sur le forum (et/ou sur le web) devrait également te donner d'autres solutions.

Tu peux également regarder du coté javascript avec des scripts comme lightbox ou d'autres du même acabit, mais si cela ne concerne que quelques images, tu peux sans doute t'en passer

Concernant la méthode de Stu Nicholls, elle est sûrement à déconseiller dans ton cas de figure.

Cdt,
Sylvain