Переход границы-радиуса не работает в Safari - PullRequest
Новая
       126

Переход границы-радиуса не работает в Safari

0 голосов
/ 08 мая 2020

Я работаю над небольшой страницей, и один из разделов будет содержать галерею изображений. Исходные изображения - квадраты, но на странице я установил радиус границы на 50%, а затем, когда вы наводите курсор на изображение, радиус становится 0%, а изображение также масштабируется до 1,4.

Это отлично работает, но я также хочу добавить div с текстом перед изображением при наведении курсора. Этот текст будет содержать некоторую информацию, и он будет немного прозрачным, чтобы вы могли видеть изображение за ним. Приведенный ниже код отлично работает в IE, Chrome и FF, но Safari просто не хочет сотрудничать. Когда свойство scale изображения работает, border-radius не будет, и наоборот.

HTML

<div class="bild">
        <img src="img/Soffa2.png">
          <div class="bild_text">
            <div class="bild_textrad">
              <h2>SoffaDirekt</h2>
              <p>Concept</p>
              <a href="#">Read more!</a>
            </div>
          </div>
        </div>

CSS

.bild {
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 95%;
  width: 95%;
  border-radius: 50%;
  transition-property: border-radius;
  transition-duration: .8s;
}

.bild:hover{
  border-radius: 0%;
}

.bild > img {
  max-width: 102%;
  max-height: 102%;
  transition-property: transform;
  transition-duration: .8s;
}

.bild:hover > img{
  transform: scale(1.3);
}

.bild_text{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(23 , 23, 23, 0.5);
  color: white;
  visibility: hidden;
  opacity: 0;
  transition: opacity .8s, visibility .8s;
}

.bild:hover > .bild_text{
  visibility: visible;
  opacity: 1;
}

1 Ответ

0 голосов
/ 08 мая 2020

В CSS есть несколько свойств, перед которыми нужно применить префикс -webkit-, точно так же, как 

.bild {
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 95%;
  width: 95%;
  border-radius: 50%;
  -webkit-transition-property: border-radius; /* Safari */
          transition-property: border-radius;
  -webkit-transition-duration: 0.8s;  /* Safari */
          transition-duration: 0.8s;
}

version 3.1 to 6.1 поддержки сафари transition-property и transition-duration с префиксом -webkit-.

...