-1

Добрый вечер. Помогите решить проблему. Нужно реализовать такую фитчу. Есть 5 рисунковПример

Нужно сделать что б при наведении на картинку (например 2) она увеличивалась (допустим процентов на 15 - 20), когда убираешь курсор она возвращалась в исходное положение. Тоже самое к картинкам 3, 4, 5. А при наведении на картинку 1 увеличивались все 5 картинок. Я так понимаю что это реализовать можно только на JS.

5
  • можно и просто с помощью CSS
    – fanfer
    23 янв 2018 в 18:48
  • Если не секрет как?
    – Drongo_x17
    23 янв 2018 в 18:55
  • 1
    Псевдокласс :hover 23 янв 2018 в 18:55
  • А как сделать что б при наведении на 1 увеличивались все картинки с 1 по 5?
    – Drongo_x17
    23 янв 2018 в 19:02
  • 1

2 ответа 2

2

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 350px;
  height: 350px;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
}

.inner_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.inner_wrapper .img {
  position: absolute;
  border-radius: 100%;
}

.img1 {
  position: relative;
}

.img2 {
  left: 30px;
  top: -50px;
}

.img3 {
  right: -50px;
  top: -50px;
}

.img4 {
  left: -50px;
  bottom: 50px;
}

.img5 {
  right: -50px;
  bottom: -50px;
}

.img {
  transition: .3s;
  z-index: 3;
}

.img:hover {
  transform: scale(1.2);
}

.img1:hover+.inner_wrapper .img {
  transform: scale(1.2);
}
<div class="wrapper">
  <img src="http://via.placeholder.com/350x350" alt="" class="img img1">
  <div class="inner_wrapper">
    <img src="http://via.placeholder.com/100x100/ff0000" alt="" class="img img2">
    <img src="http://via.placeholder.com/100x100/00ff00" alt="" class="img img3">
    <img src="http://via.placeholder.com/100x100/0000ff" alt="" class="img img4">
    <img src="http://via.placeholder.com/100x100/ff00ff" alt="" class="img img5">
  </div>
</div>

1
  • Спасибо. У меня тоже получилось сделать самому, правда код в два раза больше)
    – Drongo_x17
    23 янв 2018 в 21:03
1

.container {
  width: 960px;
  margin: 0 auto;
}

.container-img {
  position: relative;
  width: 500px;
  margin: 0 auto;
}

.img-block {
  width: 380px;
  height: 380px;
  margin: 0 auto;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  overflow: hidden;
}

#zona {
  position: absolute;
  width: 245px;
  height: 165px;
  left: 70px;
  top: 110px;
  z-index: 2;
}

.one {
  position: absolute;
  width: 380px;
  height: 380px;
  z-index: 1;
}

.six {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 116px;
  z-index: 3;
}

.seven {
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 3;
  bottom: 20px;
}

.eight {
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: 8px;
  left: 140px;
  z-index: 3;
}

.nine {
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: 110px;
  right: -25px;
  z-index: 3;
}

.ten {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 3px;
  right: -15px;
  z-index: 3;
}

.eleven {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 5px;
  left: 85px;
  z-index: 3;
}


/*---------- HOVER ----------*/

.img-block .one {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 2.3s 0.5s;
  transition: all 2.3s 0.5s;
  overflow: hidden;
}

.img-block .img-mov {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition: all 2.3s 0.5s;
  transition: all 2.3s 0.5s;
  overflow: hidden;
}

#zona:hover~.big {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  overflow: hidden;
}

.img-block .img-mov:hover {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  overflow: hidden;
}
<div class="container">
  <div class="container-img">
    <div class="img-block">
      <div id="zona"></div>

      <img class="one big" src="img/1.png">

      <img class=" six img-mov big" src="img/6.png">

      <img class="seven img-mov big" src="img/7.png">

      <img class="eight img-mov big" src="img/8.png">

      <img class="nine img-mov big" src="img/9.png">

      <img class="ten img-mov big" src="img/91.png">

      <img class="eleven img-mov big" src="img/92.png">


    </div>

  </div>


</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.