bounty将在6天后过期。回答此问题可获得+50声望奖励。gaito Uzumaki希望引起更多人关注此问题。
我正在做一个过渡，当我悬停时，我需要增加图像容器的宽度和适合的图像，我的过渡从最小到右增加宽度，而一切工作的图像有点放大，我不知道如何发生，所以会很高兴，如果有人帮助我，下面是我的html和css。
@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;
transition: opacity 0.5s linear;
}
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>我想要的过渡是什么
提前感谢，并请问你是否认为有smtg错误，在我这边的解释
2条答案
按热度按时间jfewjypa1#
只需将
img元素的width更改为max-width：工作示例
x一个一个一个一个x一个一个二个x
w46czmvw2#
把img：hover的宽度减小到285px怎么样？