Effet de redimensionnement (rollover) sur une image (photo)

**cleo57** · 08/04/2014, 16h30

Bonjour,

Je n'arrive pas à comprendre comment on peut appliquer un effet d'agrandissement quand la souris passe sur une vignette image sans que ce redimensionnement apparaisse pixellisé ?

Est-ce qu'il est possible en css d'appliquer cette transformation sans perte de qualité sur un fichier .JPG ?

Merci pour votre aide

**NoSmoking** · 08/04/2014, 21h45

Bonjour,
il suffit que agrandie ton image est sa taille réelle

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Zoom Image</title>
<style>
.zoom{
  width:54px;
}
.zoom:hover{
  width:216px;  /* largeur réelle */
}
</style>
</head>
<body>
  <img class="zoom" src="http://www.developpez.net/template/images/logo.png" alt="logo">
</body>
</html>

**cleo57** · 09/04/2014, 09h24

Merci beaucoup

Cependant dans mon cas je voulais que l'effet se superpose aux autres vignettes. Je pensait utiliser la propriété transform: scale mais je n'arrive pas à obtenir l'effet désiré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.zoom{
  width:70px;
  z-index:1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -transform: scale(1);
  -webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s;
-transition-duration: 0.5s; 
}
.zoom:hover{
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
  	-o-transform: scale(2);
  	-transform: scale(2);
  	width:250px;
  	z-index: 5;  
}
.image{
	position: absolute;
	top: 150px;
	left: 400px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="image">
<img class="zoom" src="bw-1.jpg">
<img class="zoom" src="color-4.jpg">
</div>

Je pense qu'avec transform: scale, la dimension de l'image est multipliée par 2 ce qui la rend pixellisée au final. Avec votre solution cela marche mais la vignette s'agrandit sans se superposer..

**Bovino** · 09/04/2014, 09h40

je voulais que l'effet se superpose aux autres vignettes

C'est assez difficile de comprendre ce que tu entends par là...

Néanmoins, il faut bien se rendre compte d'une chose : si tu veux multiplier la taille par 2 (scale(2)) donc la surface par 4, tu auras nécessairement une perte de qualité. Tu ne peux pas avoir le même nombre de pixels sur une surface x*y pixels que sur 2x*2y pixels !

**cleo57** · 09/04/2014, 09h52

Par "superposer" je voulais dire que lorsque la souris survole la vignette celle-ci s'agrandit au dessus des autres vignettes

**NoSmoking** · 09/04/2014, 20h19

Tu peux toujours t'inspirer de Galerie au clic sans JavaScript, il te restera à adapter.

Effet de redimensionnement (rollover) sur une image (photo)

Dimensionnement en CSS

Discussions similaires

Partager

Partager