CSS Img 仅在悬停时调整过渡时间

Question

我的其中一张图片上的动画有问题。我希望图像在悬停时通过过渡时间调整大小（然后当鼠标移开图像时有一个过渡时间回到原始大小）但是当我调整 window 大小时图像相应地调整大小时，它随着过渡时间调整大小。有谁知道解决这个问题的方法吗？

<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);
}

我明白为什么在 window 调整大小时过渡适用于图像，但我不知道如何在鼠标移开时应用过渡。谁能提出解决此问题的方法？

Gif of resizing issue

编辑：下面发布了完整代码

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>

Answer 1

您需要为鼠标离开时的动画分配 width 而没有 hover，检查它

.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
    width:35%;
}

.column:hover img{
    filter: brightness(0.5);
    width:110%;
    transform: translate(-5%,-5%);
    transition: 0.6s ease;
}

<div class="column">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>
</div>

Answer 2

尝试使用 scale(2) 它对我来说效果很好。

But you need to change translate() value as per the scale() value as per your requirement.

.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
}

.column:hover img{
    filter: brightness(0.5);
    transform: translate(50%,50%) scale(2);
    transition: 0.6s ease;
}

<div class="column">
    <a href="-----.html">
        <img src="https://picsum.photos/300/100/?random">
    </a>
</div>

更新了您的代码。

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(-10%,-10%) scale(1.3);
  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>

希望对您有所帮助。

Answer 3

试试这个：

.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
 
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}


}
.icon-wrap .icon-one{

 width:150px;
      height:150px;
transform:translate(0%,0%);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: translate(0%,0%); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}



@keyframes icon-wrap {
  0% { transform:translate(0%,0%); }
  100% { transform: translate(40%,40%)scale(2);
   width:150px;
      height:150px;
  }
}
@-webkit-keyframes icon-wrap {
  0% { transform: translate(0%,0%); }
  100% { transform: translate(40%,40%) scale(2); 
   width:150px;
      height:150px;  }
}

<div class="container icon-wrap">
<div class="icon">
   <div class="icon-one">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>

  </div>
</div>
</div>

.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
 
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}


}
.icon-wrap .icon-one{

 width:150px;
      height:150px;
transform:translate(40%,40%)scale(2);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}

<div class="container icon-wrap">
<div class="icon">
   <div class="icon-one">
    <a href="-----.html">
        <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </a>

  </div>
</div>
</div>

Answer 4

您可以仅在 window 悬停时在图像上设置过渡。这样，在调整大小时它不会再影响你的元素，但在你的元素悬停和鼠标移开时它仍然是活动的。

/* 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>

但是使用此解决方案，如果从文档本身鼠标移出，那么转换也将被禁用...

不幸的是，除了使用 js，我没有看到任何其他解决方案。

(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 仅在悬停时调整过渡时间

CSS Img resize transition time only on hover

html

css

image-resizing