<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 500px; /* 画像の幅に合わせて調整してください */
height: 300px; /* 画像の高さに合わせて調整してください */
overflow: hidden;
}
.image {
position: absolute;
top: 0;
transition: transform 0.5s ease-in-out;
}
.before {
left: 0;
}
.after {
right: 0;
}
</style>
</head>
<body>
<div class=”container”>
<img class=”image before” src=”before_image.jpg” alt=”Before”>
<img class=”image after” src=”after_image.jpg” alt=”After”>
</div>
<script>
var container = document.querySelector(‘.container’);
var beforeImage = document.querySelector(‘.before’);
var afterImage = document.querySelector(‘.after’);
container.addEventListener(‘mouseover’, function() {
beforeImage.style.transform = ‘translateX(100%)’;
afterImage.style.transform = ‘translateX(-100%)’;
});
container.addEventListener(‘mouseout’, function() {
beforeImage.style.transform = ‘translateX(0)’;
afterImage.style.transform = ‘translateX(0)’;
});
</script>
</body>
</html>
コメント