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?

Gif of resizing issue

edit: full code posted below

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>

回答1:

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...

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>

回答2:

You need to assign width without hover for animation on mouse out, check it

.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>

回答3:

Try this:

.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>

回答4:

Try using scale(2) it's working well for me.

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>

Updated with your code.

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>

Hope this was helpful for you.

来源：https://stackoverflow.com/questions/54215568/css-img-resize-transition-time-only-on-hover

标签

html

css

image-resizing