I have a fullscreen flexbox split into two equal divs. On the left hand div I have an unordered list of links. On mouseover on each link I want to the background image on the right hand div to change to a different picture. I have been able to get this to work using javascript - but I want to add an animation when the picture changes. The transition on the background image works when the page first loads, but not when I mouseover on the links - the picture changes, but there is no animation. I have tried to use the sibling selector to target the right hand div when I hover over the link - but it doesn't work - I think this is because while the enclosing div of the menu is a sibling of the right hand div, the link in the menu isn't. I have provided a simplified version below with colours rather than images. Ii what I am trying to do possible? Any suggestions gladly received!
function setImage(x) {
switch (x)
{
case 0:
document.getElementById("right-photo").style.background="yellow"
break;
case 1:
document.getElementById("right-photo").style.background="green"
break;
case 2:
document.getElementById("right-photo").style.background="pink"
break;
case 3:
document.getElementById("right-photo").style.background="orange"
break;
}
} .page{
height: 100vh;
width: 100vw;
background: yellow;
display: flex;
}
.left-menu, .right-photo{
height: 100%;
width: 50%;
}
.left-menu{
background: red;
}
.right-photo{
background: blue;
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
} <div class="page">
<div class="left-menu">
<ul>
<li><a href="#"onmouseover="setImage(1)" onmouseout="setImage(0)">First</a></li>
<li><a href="#"onmouseover="setImage(2)" onmouseout="setImage(0)">Second</a></li>
<li><a href="#"onmouseover="setImage(3)" onmouseout="setImage(0)">Third</a></li>
</ul>
</div>
<div class="right-photo" id="right-photo"></div>
</div>
Just because you define an animation this doesn't mean the animation is being played automtacially. You can define which property you want to animate, then this will be animated everytime you change it. For your example I set transition: background 1s for your right div.
function setImage(x) {
switch (x) {
case 0:
document.getElementById("right-photo").style.background = "yellow"
break;
case 1:
document.getElementById("right-photo").style.background = "green"
break;
case 2:
document.getElementById("right-photo").style.background = "pink"
break;
case 3:
document.getElementById("right-photo").style.background = "orange"
break;
}
}.page {
height: 100vh;
width: 100vw;
background: yellow;
display: flex;
}
.left-menu,
.right-photo {
height: 100%;
width: 50%;
}
.left-menu {
background: red;
}
.right-photo {
background: blue;
transition: background 1s;
}<div class="page">
<div class="left-menu">
<ul>
<li><a href="#" onmouseover="setImage(1)" onmouseout="setImage(0)">First</a></li>
<li><a href="#" onmouseover="setImage(2)" onmouseout="setImage(0)">Second</a></li>
<li><a href="#" onmouseover="setImage(3)" onmouseout="setImage(0)">Third</a></li>
</ul>
</div>
<div class="right-photo" id="right-photo"></div>
</div>