I am a newbie web designer. I am trying to make a menu where when i hover over a menu item on right the images on left fade out and the other image fades in. I also want the fade in and out with zoom in and zoom out effect, much like the menu from [the website][1] (see the menu in the top right).
Here is my version but its a work-in-progress
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.left {
width: 50%;
background-size: cover;
}
.right {
width: 50%;
background-color: #111111;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.menu a {
margin: 10px;
padding: 10px;
text-decoration: none;
color: #333;
font-size: 32px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.menu a:hover {
margin: 10px;
padding: 10px;
text-decoration: none;
color: white;
}<div class="container">
<!-- leftSide -->
<div class="left">
<div style="height: 100%; width: 100%; background: url('https://images.pexels.com/photos/15792501/pexels-photo-15792501.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center / cover;"></div>
<div style="height: 100%; width: 100%; background: url('https://images.pexels.com/photos/16375253/pexels-photo-16375253.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center / cover;"></div>
<div style="height: 100%; width: 100%; background: url('https://images.pexels.com/photos/14917839/pexels-photo-14917839.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center / cover;"></div>
<div style="height: 100%; width: 100%; background: url('https://images.pexels.com/photos/15413559/pexels-photo-15413559.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center / cover;"></div>
</div>
<div class="right">
<div class="menu">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</div>
</div>
</div>Thanks for Help.
First, we can simplify the code a bit so that hovering over a link will transition in the associated image and transition out the previous image.
body {
margin: 0;
padding: 0;
}
.menu {
position: relative;
padding-left: 50%;
background-color: #111;
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.menu a {
margin: 10px;
padding: 10px;
text-decoration: none;
color: #333;
font-size: 32px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.menu a:hover {
margin: 10px;
padding: 10px;
text-decoration: none;
color: white;
}
.menu span {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.menu img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .5s, transform .5s;
}
.menu a:not(:hover) img {
opacity: 0;
transform: scale(1.1);
}<div class="menu">
<a href="#">
<span><img src="https://images.pexels.com/photos/15792501/pexels-photo-15792501.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> Home
</a>
<a href="#">
<span><img src="https://images.pexels.com/photos/16375253/pexels-photo-16375253.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> About Us
</a>
<a href="#">
<span><img src="https://images.pexels.com/photos/14917839/pexels-photo-14917839.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> Services
</a>
<a href="#">
<span><img src="https://images.pexels.com/photos/15413559/pexels-photo-15413559.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> Contact Us
</a>
</div>In the website you linked though, the last-hovered image stays active. We'd need to use JavaScript to mark the active item to keep the associated image active:
document
.querySelector('.menu')
// Listen for when the mouse hovers a child element.
.addEventListener('mouseover', ({ target, currentTarget }) => {
// Get the hovering element, if it is a `<a>` element and not
// marked as active:
const hovering = target.matches('a') ? target : target.closest('a');
if (hovering && !hovering.matches('.active')) {
// Remove the previously marked active element.
currentTarget.querySelector('.active').classList.remove('active');
// Add the active mark to this element.
hovering.classList.add('active');
}
});body {
margin: 0;
padding: 0;
}
.menu {
position: relative;
padding-left: 50%;
background-color: #111;
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.menu a {
margin: 10px;
padding: 10px;
text-decoration: none;
color: #333;
font-size: 32px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.menu a:hover {
margin: 10px;
padding: 10px;
text-decoration: none;
color: white;
}
.menu span {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.menu img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .5s, transform .5s;
}
.menu a:not(.active) img {
opacity: 0;
transform: scale(1.1);
}<div class="menu">
<a href="#" class="active">
<span><img src="https://images.pexels.com/photos/15792501/pexels-photo-15792501.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> Home
</a>
<a href="#">
<span><img src="https://images.pexels.com/photos/16375253/pexels-photo-16375253.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> About Us
</a>
<a href="#">
<span><img src="https://images.pexels.com/photos/14917839/pexels-photo-14917839.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> Services
</a>
<a href="#">
<span><img src="https://images.pexels.com/photos/15413559/pexels-photo-15413559.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /></span> Contact Us
</a>
</div>