Как задать стиль именно для ifone в css?

Question

[starmi81]

Всем доброй ночи!
Друзья, столкнулся с проблемой:
Сверстал карточки, навешал эффект hover при котором происходит поворот карточки и на обратной стороне возникает белый фон карточки с текстом.
На android протестил, всё работает, но вот с ifone вышел казус, а именно:
- При hover карточка поворачивается, но белый фон с текстом не появляется.
Как победить эту незадачу?
Верстка карточки:

<div class="change-img">
								<div class="front-side-img"><img src="images/image.jpg" alt=""></div>
								<div class="back-side-img">
									<div class="back-side__info">
										<h3 class="back-side__title">
											Город
										</h3>
										<span class="back-side__aderss">
											Адрес
										</span>

										<span class="back-side__data">
											Дата 
										</span>
										<span class="back-side__prise">
											цена
										</span>
										<p><a href="#callback" class="btn btn-primary btn-outline btn-merop">Копка
												</a>
										</p>
									</div>
								</div>
							</div>

Стилизация карточки:

.change-img {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;

}
.change-img:hover .front-side-img {
  transform: rotateY(180deg);
}
.change-img:hover .back-side-img {
  transform: rotateY(360deg);
}
/* Стороны изображения */
.front-side-img, .back-side-img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
 }
.front-side-img img {
  max-width: 100%;
  min-width: 100%;
  height: auto;
  background-image: url(../images/DM.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
}
.back-side-img img {
  background-color: #fff;
  max-width: 100%;
  min-width: 100%;
  height: auto;
  transform: scaleX(-1);
  border-radius: 15px;
}
.back-side-img {
  transform: rotateY(180deg);
  -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  border-radius: 15px;
}

.my-text {
  display: inline-block;
  position: absolute;
  color: #F85A16;
  font-size: 30px;
  font-weight: bold;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}

.change-img:not(:last-child) {
  margin-right: 15px;
  margin-bottom: 15px;
}

.back-side__info {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 15px 25px;
}


.btn-merop {
  display: inline-block;
  margin-top: 15%;
  max-width: max-content;
  padding: 10px 20px;
  line-height: 1.42857;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;

}

Answer 1

[Талян]

А как ты на смартфоне делаешь :hover? Там же тач.
Делай :active

В андроиде это вроде как заложено, а сафари в айфонах не считает :hover потому что он рассматривает именно нажатие :active что на таче по сути одно и тоже, если у вас не нужно по сайту зажатым пальцем водить на элементы

Comments

[profesor08]

:hover тоже есть, но работает несколько иначе, похоже на фокус.

[Талян]

profesor08, я как-то CSS-ное выпадающее меню делал, на моём старом айфоне 5 не работало ничего.

Кода уже нет, проверить не смогу.

[starmi81]

Благодарю за ваш совет.
Если я верно понял вас, то в медиа запросах, я пишу:

@media (max-width: 767px) {

  .change-img:active .front-side-img {
    transform: rotateY(180deg);
  }
  .change-img:active .back-side-img {
    transform: rotateY(360deg);
  }
}

Но active не подходит. Так как если я тапаю на элемент, то он поворачивается, но как только я убираю палец всё возвращается на круги своя...
Возможно, я что то не верно выполнил?

[starmi81]

И еще мысль посетила:
Верно ли я понимаю, для грамотной реализации эффекта с поворотом картинки, нужно в js, классу .change-img присвоить класс active, и на этот класс навешать событие "поворот" , а при повторном тапе событие active отключается и .change-img возвращает картинку?
Но в этом случае, кнопка которая находится в back-side-img, будет неактивна?
Что то я совсем запутался.