CSS scale jitter on one of 2 div

Question

I put 2 <div> side by side and added both a scale animation and an overlay on hover. Yet the left side jitters when the mouse moves inside the area while the right side is quite stable on hover.

I thought both sides are using pretty much the same code and could not figure out the cause of this problem. What caused the jitter?

code here

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  opacity: 0;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

Temani Afif · Accepted Answer · 2019-10-29T00:32:31.787

You are having a complex case of stacking elements. You set your overlay element position:absolute and the first positionned ancestor is showcase so initially both overlay are overlapping and filling the width of showcase

Remove the opacity to notice this:

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

Now on hover you add scale() to the parent element of your overlay which will make them positionned relatively to them since transform change the containing block of absolute and fixed element.

So you will have this:

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

You are toggling between both states and since in the first one you have an overlap, you will get that bad effect where you are losing the hover effect. It doesn't happen with the second image because its overlay is on the top so you will never loss the hover.

To avoid this you can keep transform on your element initially or consider position:relative on them to make sure your overlay elements are positioned relatively to their parent and never overlap:

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
  transform: scale(1);
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
  transform: scale(1);
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  opacity:0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

That's a incredibly clear and concise explanation, thank you so much X3 — Amarth Gûl, Oct 29 '19 at 00:32

score 1 · Answer 2 · answered Oct 29 '19 at 00:24

1

I added the following to your cameraShowcase and wheelShowcase:

position: relative;
display: inline-block;
float: left;

answered Oct 29 '19 at 00:24

Dylan Anlezark

1,256
2
12
27

I see, so the problem is about the `display` I assume? – Amarth Gûl Oct 29 '19 at 00:28
As @temani has just pointed out you had your elements stacking on top of one another – Dylan Anlezark Oct 29 '19 at 00:29
1

note the display:inline-block is not needed when using float – Temani Afif Oct 29 '19 at 00:34
@temani I did notice that i get a warning when i use display:inline-block with float:left however just out of habit i have left it in place. Is there any reason as to why it is a bad idea to have them used together other then it has no effect? – Dylan Anlezark Oct 29 '19 at 00:38
1

it's not a bad idea, it's simply useless as it has no effect ... if you are aware about this you can keep it or remove it but it may lead people to think that it's needed to have where it's not. – Temani Afif Oct 29 '19 at 00:40

CSS scale jitter on one of 2 div

2 Answers2