Struggling to resize an image while implementing a hover effect with css and javascript. The code I have so far is:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blonded</title>
<link rel="stylesheet" href="style.css">
</head>
<section class="gallery">
<div class="imageContainer1">
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="./hover-effect.js"></script>
<script src="./app.js"></script>
</html>
CSS
.gallery {
display: flex;
padding: 2rem;
justify-content: center;
align-items: center;
}
.imageContainer1 {
padding: 1rem;
width: 75%;
overflow: hidden;
text-align: center;
}
#imageone {
position: relative;
max-width: 100%;
max-height: 100%;
}
JavaScript
new hoverEffect ({
parent: document.querySelector('.imageContainer1'),
image1: 'img/bdcmag2.jpg',
image2: 'img/bdcmag.jpg',
displacementImage: 'img/displacement.jpg',
})
Check out the result after running the code.