Hello i am curently trying to re create a transition and playing with opacity to switch images on hover but maybe it is due to object-fit cover property the image kinda zooms in when i increase container width on hover and would like to ask your help on this problem i am also posting gif for what i want it to be and whats it is currenlty now:
you can view the gif to get the idea what i am trying to make and below is my html and css code i have tried till now:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&family=Shantell+Sans:ital,wght@1,300&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root{
--small : url("https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg");
--image : url("https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg");
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body::after{
position:absolute;
width:0;
height:0;
overflow:hidden;
z-index:-1;
content: var(--image)
}
.container{
white-space: nowrap;
overflow-x: scroll;
scrollbar-width: none;
justify-content: flex-start;
width: 600px;
}
.container::-webkit-scrollbar {
width: 0;
height: 0;
}
.item{
display: inline-block;
height: 160px;
width: 130px;
position: relative;
transition: all 0.5s linear;
}
img{
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
border-radius: 0.5rem;
}
img:nth-child(1){
opacity: 1;
}
img:nth-child(2){
opacity: 0;
}
.item:hover{
width: 300px;
}
.item:hover img:nth-child(1){
opacity: 0;
}
.item:hover img:nth-child(2){
opacity: 1;
} <!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">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"
integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Goggle movies</title>
<script src="index.js" defer></script>
</head>
<body>
<div class="container">
<div class="item">
<img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
<img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
</div>
<div class="item">
<img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
<img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
</div>
<div class="item">
<img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
<img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
</div>
<div class="item">
<img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
<img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
</div>
</div>
</body>
</html>what i want to know is how to make transition shown on gif i mean my code image zooms in and fits when changing image on hovering
2
Answers
Just change CSS in the
imgfromobject-fit: cover;toobject-fit: fill;sothe image will fit without zooming.
You’ll have to fix the width of the second image to avoid the zooming effect, and then hide overflow on your wrapper items. Add a transition style to your images as well, for the opacity.