Shraddha_Patel Ответов: 1

Как применить несколько фоновых изображений в эффекте наведения изображения в java-скрипте.

как применить несколько фоновых изображений в эффекте наведения изображения в java-скрипте.

Что я уже пробовал:

как применить несколько фоновых изображений в эффекте наведения изображения в java-скрипте.

F-ES Sitecore

Вы не можете, вы можете иметь только одно фоновое изображение одновременно. Вам нужно будет объяснить свое требование более подробно.

Richard Deeming

Вы в этом уверены? :)

Использование нескольких фонов - CSS: Каскадные Таблицы Стилей | MDN[^]

1 Ответов

Рейтинг:
0

Lalith Judah

вы можете попробовать это, добавив к ним несколько тегов img для каждого блока стилей 

<!DOCTYPE html>
<html>
<head>
<style>

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

figure1 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure1:hover img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

figure2 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure2:hover img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

figure3 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure3:hover img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

figure4 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure4:hover img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

figure5 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure5:hover img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

figure6 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure6:hover img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
</style>
</head>
<body>
<div>

<figure>
 
</figure>

<figure1>
  <img src="sa.jpg" />  
</figure1>

<figure2>
  <img src="sa.jpg" />  
</figure2>

<figure3>
  <img src="sa.jpg" />  
</figure3>

<figure4>
  <img src="sa.jpg" />  
</figure4>

<figure5>
  <img src="sa.jpg" />  
</figure5>

<figure6>
  <img src="sa.jpg" />  
</figure6>


</div>
</body>
</html>

Shraddha_Patel

Спасибо за предложение...это полезно для меня