28172 sujets

CSS et mise en forme, CSS3

[Résolu] Fonction transform : comportement sur une série d'images

Bonjour,
Dans les pages photos que j'essaie de rédiger, je trouve un comportement inattendu de la fonction transform.
Sur une série de miniatures en ligne, je souhaite agrandir chacune successivement à un endroit fixe de ma page avec un "img:hover; Or sur la première j'agrandis la seconde, sur la seconde j'agrandis la troisième etc ...
En voici le source :
<!doctype html>
<html>
<head>
<style type="text/css">

#pelloche{
	width:auto; height:130px;
	background-color:black;
	}
#pelloche img{
	height:100px; width:150px; margin:15px 5px;
	background-color:pink;
	}
img:hover{
	position:absolute; top:300px; left:800px;
	transform:scale(4);
	}

</style>
</head>
<body>
<div id="pelloche">
	<img src="photo_1.jpg" />
	<img src="photo_2.jpg" />
	<img src="photo_3.jpg" />
	<img src="photo_4.jpg" />
	<img src="photo_5.jpg" />
	<img src="photo_6.jpg" />
	<img src="photo_7.jpg" />
	<img src="photo_8.jpg" />
	<img src="photo_9.jpg" />
	<img src="photo_10.jpg" />
</div>
</body>
</html>

Comment remédier à ce pb ?
J'ai déjà essayé de fixer la position des images (dans le css par position:fixed; et dans la ligne html <img style="left:xxxpx;") et aussi de les inclure dans des <div> ou des <li> fixées, cela rend alors la fonction transform complètement inopérante...
En pièce jointe un exemple du résultat : c'est la miniature de la photo_1 qui étant sélectionnée !
Par ailleurs, la fonction 
transform:scale(4);
rend elle la résolution réelle souhaitée ou se contente t'elle d'agrandir l'échelle de la miniature ?
Merci par avance pour vos conseils.
Modifié par Dickie (22 Jul 2020 - 11:09)
Modérateur
Bonjour,

Lorsque tu tu fais un hover sur une photo, tu la mets en position absolute dans le css ce qui a pour effet de la sortir du flux (la photo que tu agrandis se retrouve "ailleurs").

Du coup, la photo suivante en miniature prend la place de la photo que tu agrandis quand tu fais un hover sur cette photo.

Tu agrandis donc bien la bonne photo, mais tu as l'impression que le comportement est bizarre.

Une possibilité pour contrer cet effet est par exemple de mettre toutes les photos miniatures en position absolute (il y a plein d'autres solutions en fonction du contexte).

Amicalement,
Modérateur
Bonjour,

Note : quand tu fais ton hover sur une photo et que tu la déplaces, ta souris n'est plus sur la photo une fois le déplacement effectué, et du coup, si ça marche, c'est vraiment du hasard.

Il faudrait sans doute revoir ce que tu veux faire vraiment !

Amicalement,
Ce que je souhaite, c'est que au passage de la souris successivement sur les miniatures, s'affichent les photos correspondantes en un seul endroit fixe de la page en dehors de la zone des miniatures.
Mais utiliser la fonction "img:hover { transform:... " n'est peut être pas la bonne façon.
Je voulais faire sans javascript (que je ne maitrise pas du tout).
Si tu as une autre idée ... ?
Merci de toutes façons !
Modérateur
Bonjour,

Dickie a écrit :
Ce que je souhaite, c'est que au passage de la souris successivement sur les miniatures, s'affichent les photos correspondantes en un seul endroit fixe de la page en dehors de la zone des miniatures.
...
Si tu as une autre idée ... ?
Merci de toutes façons !


Je ne suis pas trop fan des hover (sauf éventuellement pour les liens et les boutons). Mais bon, s'il fallait vraiment le faire, je mettrais 2 balises <img> pour chaque image : une pour la miniature, et une pour l'agrandie. Quand la souris n'est sur aucune image, seules les miniatures sont affichées. Si on passe sur une image, on fait apparaitre l'image agrandie correspondante.

Par exemple :

<!doctype html>
<html>
<head>
<style type="text/css">

#pelloche{
	background-color:black;
	}
#pelloche img.mini{
	margin:15px;
	height:100px;
	width:150px;
	}
#pelloche img.maxi{
	display:none;
}
#pelloche img.mini:hover+img.maxi{
	position:absolute;
	display:block;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:15px solid black;
	width:50vw;
}

</style>
</head>
<body>
<div id="pelloche">
	<img class="mini" src="photo_1.jpg" />
	<img class="maxi" src="photo_1.jpg" />
	<img class="mini" src="photo_2.jpg" />
	<img class="maxi" src="photo_2.jpg" />
	<img class="mini" src="photo_3.jpg" />
	<img class="maxi" src="photo_3.jpg" />
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</div>
</body>
</html>


Amicalement,
Modifié par parsimonhi (22 Jul 2020 - 17:34)
Meilleure solution
Modérateur
Et l'eau,

Bien que la solution de notre ami parsimonhi soit convaincante (pur css), je ne suis pas sûr qu'elle soit efficace en responsive. Je veux dire par là que ça devient hasardeux avec la position:absolute. En fait, tout dépend du contexte Smiley smile

@jean-pierre : oui ça fonctionne mais ton code est lourd

@dickie :
1. tu vas avoir deux formats d'images (mini et grande). Ce qui va différencier cela, c'est dans le nom du fichier (ou l'url). exemple : min-image-mini.jpg VS min-image-max.jpg
2. tu affiches ta petite liste d'images (ul >li >a > img)
3. En js tu octroies un container qui va recevoir l'image cliquée/survolée

Ce qui donne ceci : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .diaporama {
            max-width: 800px;
            margin: 0 auto;
        }
        .diaporama .container{
            height: 800px;
        }
        .diaporama .container img{
            max-width: 800px;
            width: 100%;
        }
        .diaporama ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        .diaporama ul li{
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <main>
        <div class="diaporama">
            <ul>
                <?php for($i = 1; $i <= 3; $i++): ?>
                <?php $src = "https://via.placeholder.com/200x200.png?text=".$i ?>
                <li><a href="<?= $src ?>"><img src="<?= $src ?>" alt=""></a></li>
                <?php endfor; ?>
            </ul>
        </div>
    </main>
    <script>
(()=>{
    let $diaporamas = document.querySelectorAll('.diaporama');
    window.addEventListener('DOMContentLoaded', ()=>{
        $diaporamas.forEach(($diaporama)=>{
            $diaporama.insertAdjacentHTML('beforeend', '<div class="container"><img src="" alt="" /></div>');
            $diaporama.querySelectorAll('ul li a img').forEach(($img, i)=>{
                $img.addEventListener('mouseover', (e)=>{
                    e.preventDefault();
                    $diaporama.querySelector('.container img').src = $img.src.replace('200x200', '800x800');
                });
            });
        });
    });
})();
    </script>
</body>
</html>

* c'est une piste à suivre. Ne pas prendre le code tel quel puisqu'il faudra adapter :
- transpiler en es5 (?)
- gérer le responsive.
- améliorer le css
Modifié par niuxe (22 Jul 2020 - 23:10)
Merci à tous trois.
Je retiens la solution de parsimonhi : elle correspond exactement à ce que je souhaitais.
Jean-Pierre-Bruneau et niuxe : probablement plus sohistiqués et fiables, mais hors de mon faible niveau (js) !
En toux cas merci beaucoup - je reviendrai ...
Cordialement,
Sujet clos
Aller à