CODEWITHSUNDEEP
csscss-animations
cis
cis

Reputation: 1377

Changing size on hover: ugly flicker/"shaking" effect

I want to change the size of an HTML element on mouse over. It works in general. However, at least in Firefox, it creates an ugly flicker effect, when the mouse is right at the bottom edge of the DIV: the browser will then keep resizing even if the mouse is not moved at all. Is there anything I can do about that?

.my-hover-square {
  width: 240px;
  height: 240px;
  
  position: absolute;
  display: -webkit-inline-box;
  -webkit-transition: height 1s;
  /* Safari */
  transition: height 1s;
  -webkit-transition: width 1s;
  /* Safari */
  transition: width 1s;
  
  background: pink;
}

.my-hover-square:hover {
  width: 450px;
  height: 200px;
}
<div class="my-hover-square"></div>

Upvotes: 0

Views: 1336

Answers (4)

Memo
Memo

Reputation: 38

You could wrap it:

.hover-container {
  min-width: 240px;
  height: 240px;
}

.hover-container>.my-hover-square {
  width: 240px;
  height: 240px;
  
  position: absolute;
  display: -webkit-inline-box;
  -webkit-transition: height 1s;
  /* Safari */
  transition: height 1s width 1s;
  -webkit-transition: width 1s;
  /* Safari */
  transition: width 1s;
  
  background: pink;
}

.hover-container:hover>.my-hover-square {
  width: 450px;
  height: 200px;
}
<div class="hover-container">
  <div class="my-hover-square"></div>
</div>

Upvotes: 2

user1228
user1228

Reputation:

For me, it's freaking out because you're changing the height of the div, which moves it away from the mouse pointer, which removes the :hover pseudo class, which results in the div resizing, which moves it back under the mouse pointer, which adds the :hover pseudo class. Rinse and repeat. I don't think it's possible to keep the resize and not have this happen using pure css.

.my-hover-square {
  width: 240px;
  height: 240px;
  
  position: absolute;
  display: -webkit-inline-box;
  -webkit-transition: height 1s;
  /* Safari */
  transition: height 1s;
  -webkit-transition: width 1s;
  /* Safari */
  transition: width 1s;
  
  background: pink;
}

.my-hover-square:hover {
  width: 450px;
}
<div class="my-hover-square"></div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115285

Your second transition is overriding the first

You need to combine them:

transition: height 1s, width 1s;

.my-hover-square {
  width: 240px;
  height: 240px;
  transition: height 1s, width 1s;
  background: pink;
}

.my-hover-square:hover {
  width: 450px;
  height: 200px;
}
<div class="my-hover-square"></div>

Upvotes: 3

kyun
kyun

Reputation: 10274

.my-hover-square {
  width: 240px;
  height: 240px;
  
  position: absolute;
  display: -webkit-inline-box;
/*   -webkit-transition: height 1s;
  Safari
  transition: height 1s;
  -webkit-transition: width 1s;
  Safari
  transition: width 1s; 
*/
  transition: width 1s, height 1s;
  -webkit-transition: width 1s, height 1s;
  
  background: pink;
}

.my-hover-square:hover {
  width: 450px;
  height: 200px;
}
<div class="my-hover-square"></div>

If you write transition: height 1s; and write transition: width 1s;, it's duplicate. So only transition: width 1s; can be active.

When you want to use multiple attribute with transition,

You shoulde use like this transition: width 1s, height 1s, ...;

Upvotes: 2

Related Questions