Блог

Главная - Вопросы по программированию - Как исправить масштабирование перехода для изображений

Как исправить масштабирование перехода для изображений

#twitter-bootstrap #css #bootstrap-4

#twitter-bootstrap #css #начальная загрузка-4

Вопрос:

Я пытаюсь отображать сообщения в блоге с изображением.

Я использую столбцы-карточки из bootstrap 4, и когда пользователь наводит курсор на изображение, оно масштабирует его.

Проблема в том, что когда происходит переход, радиус моей границы устанавливается по умолчанию, а затем возвращается к 10px. (См. Верхнюю границу при наведении курсора мыши)

Проверьте мою скрипку, пожалуйста: https://jsfiddle.net/feifles/93w7ryko/3 /

 body {
  background-color: green;
  padding: 50px;
}

.card {
  border-radius: 10px;
  border: 0;
}

.card img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-columns {
  background-color: green;
}

.zoom {
  overflow: hidden;
}

.zoom img {
  max-width: 100%;
  -moz-transition: all 0.7s;
  -webkit-transition: all 0.7s;
  position: relative;
  transition: all 0.7s;
}

.zoom:hover img,
.zoom:focus img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
} 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="card-columns">
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
      <div class="card zoom">
        <img src="https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/star_trek_tv_spock_3_copy_-_h_2018.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title that wraps to a new line</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Ошибка / проблема, похоже, возникает только в Chrome

Ответ №1:

В transition есть некоторые ошибки, доступные только в Google Chrome, поэтому для этого есть два полезных элемента CSS:

   -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);

-webkit префикс используется для Chrome и -moz используется для Firefox.

Ваша обновленная скрипка https://jsfiddle.net/gp8k0zm4 /

Комментарии:

1. Привет, Нишарг! Спасибо за ваш ответ! К сожалению, я не до конца понимаю это и не вижу обновленную скрипку. Не могли бы вы уточнить немного больше, пожалуйста?

2. рад вам помочь

Метки: