28111 sujets

CSS et mise en forme, CSS3

Hover images

Bonjour,

Je recherche un tutoriel CSS / HTML pour réaliser un effet sur 2 images :
Je souhaiterai que la souris soit le guide de séparation entre 2 images superposées ce qui permet au visiteur de voir en direct le différence entre les 2 images.

Je ne sais pas si je suis très explicite, voici un lien qui va vous permettre de peut-être mieux cerner ce que je souhaite, à la différence que je souhaiterais que la séparation verticale suive la souris :
https://www.google.com/intl/fr/nikcollection/products/viveza/

Merci d'avance de votre aide.
@JohnNes :
Là, vous décalez l'image. L'image superposée ne doit pas bouger, juste sa zone de visibilité.

Désolée, pas de tutoriel. Je ne pense pas non plus que ce que vous avez en tête soit une bonne idée. Imaginez l'utilisateur agacé par cette image qui suit sa souris et qui ne la lâche que lorsqu'il sort de l'image...

Smiley sweatdrop
J'ai fait ce petit script qui permet de d'obtenir l'effet que tu veux avec Jquery:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

        <style>
            .image1 {
                position: absolute;
                z-index: 0;
                top:0px;
                left:0px;
            
            }
            .image2 {
                position: absolute;
                z-index: 1;
                top:0px;
                left:0px;
                border-right: solid 1px white;
                width: 150px;
                overflow: hidden;
            }
            img {
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="image1">
            <img src="images/mon_image_une.jpg" />
        </div>
        <div class="image2">            
            <img src="images/mon_image_deux.jpg" />
        </div>
        <script>
            $('.image2').resizable({handles: "e"});
        </script>
    </body>
</html>


Bonne soirée
Sujet clos
Aller à