CSS масштаб джиттера на одном из 2 дел - PullRequest
Новая
       93

CSS масштаб джиттера на одном из 2 дел

2 голосов
/ 29 октября 2019

Я поместил 2 <div> рядом и добавил анимацию масштаба и наложение при наведении курсора. Тем не менее, левая сторона дрожит, когда мышь перемещается внутри области, в то время как правая сторона довольно устойчива при наведении.

enter image description 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>

Ответы [ 2 ]

2 голосов
/ 29 октября 2019

У вас сложный случай укладки элементов. Вы устанавливаете свой элемент наложения position:absolute, а первый позиционированный предок - showcase, поэтому изначально оба наложения перекрываются и заполняют ширину showcase

Удалите непрозрачность, чтобы заметить это: 

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>

Теперь при наведении мыши вы добавляете scale() к родительскому элементу вашего оверлея, что сделает их расположенными относительно них, так как transform меняетсодержащий блок абсолютного и фиксированного элемента.

Итак, у вас будет это: 

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>

Вы переключаетесь между обоими состояниями, и, поскольку в первом случае у вас есть перекрытие, вы получите тот плохой эффект, когда теряете эффект наведения. Это не происходит со вторым изображением, потому что его наложение находится сверху, поэтому вы никогда не потеряете наведение.

Чтобы избежать этого, вы можете сначала сохранить трансформацию на вашем элементе или рассмотреть position:relative на них, чтобы сделатьубедитесь, что ваши оверлейные элементы расположены относительно своего родителя и никогда не перекрываются: 

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>
1 голос
/ 29 октября 2019

Я добавил следующее к вашей камереShowcase и wheelShowcase: 

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