I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.
Any suggestions? By the way I have a snippet showing my code and the issue.
PS, the buttons are under the image at the moment. That doesn't need a fix.
let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
jw_backgroundswitch.src = images[index];
});
jw_btn_current.addEventListener('mouseleave', function() {
jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
});
});
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
.section-background{
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
question from:
https://stackoverflow.com/questions/65644637/add-transition-when-switching-img-src 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
