CODEWITHSUNDEEP
htmlcsscss-animations
Amarth Gûl
Amarth Gûl

Reputation: 1090

CSS scale jitter on one of 2 div

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.

enter image description here

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>

Upvotes: 3

Views: 1299

Answers (2)

Temani Afif
Temani Afif

Reputation: 273750

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>

Upvotes: 4

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

I added the following to your cameraShowcase and wheelShowcase:

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

Upvotes: 1

Related Questions