CSS Img仅在悬停时调整大小转换时间 [英] CSS Img resize transition time only on hover
问题描述
我对其中一张图片的动画存在问题.我希望图像在悬停时具有过渡时间调整大小(然后当鼠标移离图像时将过渡时间恢复为原始大小)，但是当我调整窗口大小并相应调整图像大小时，它会随着过渡而调整大小时间 .有人知道解决这个问题的方法吗?
I'm having an issue with an animation on one of my images. I want the image to resize on hover with a transition time (and then have a transition time back to the original size when the mouse moves off the image) but then when i resize the window and the image resizes accordingly, it resizes with the transition time . Does anyone know a way to get around this?
<div class="column">
<a href="-----.html">
<img src="-----.jpg">
</a>
</div>
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:100%;
height: calc(100vh - 300px);
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
height: calc(110vh - 300px);
}
我可以看到为什么在调整窗口大小时将过渡应用于图像，但是当鼠标移开时，我不知道如何将过渡应用于图像.有人可以建议解决这个问题的方法吗?
I can see why the transition applies to the image when the window resizes, but i don't know how else to get the transition to apply when the mouse moves away. Can anyone suggest a way around this?
完整的代码发布在下面
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
推荐答案
仅当窗口悬停时，才可以在图像上设置过渡.这样，在调整大小时，它将不再影响您的元素，但是在元素的悬停和鼠标移出时，它仍将处于活动状态.
You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.
/* when hovering the page */
:hover .row .column img {
transition: 0.6s ease;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
/* transition: 0.6s ease; [removed]*/
}
.row .column:hover img {
/* transition: 0.6s ease; [useless]*/
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
但是使用此解决方案，如果从文档本身鼠标移出，那么过渡也将被禁用...
But using this solution, if mousing-out from the document itself, then the transition will also get disabled...
不幸的是，除了使用js，我看不到其他解决方案.
Unfortunately, I don't see any other solution than that, except using js of course.
(function(){
let timer;
const docEl = document.documentElement;
addEventListener('resize', e => {
clearTimeout(timer);
docEl.classList.add('resizing');
timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
});
})();
:root.resizing .row .column img {
transition: none;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
transition: 0.6s ease;
}
.row .column:hover img {
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
这篇关于CSS Img仅在悬停时调整大小转换时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
