Доброго времени суток! Создаю свой первый сайт и столкнулся с небольшой загвоздкой. Суть в том что необходимо сделать:
а) При ховере на любой пункт справа - слевой стороны появлялась соответствующая картинка.
б) При прокрутке сайта вниз до нужного момента (это второй экран по счету) необходимо чтобы автоматически (без наведения) перебирались пункты (и соответственно менялись картинки).
в) Если не на один пункт не наведен курсор - пункты автоматически перебираются, но при наведении на какой либо - выскакивает нужная картинка (т.е. ховер - в приоритете).
Заранее благодарю!
P.S. Надеюсь понятно описал задание:)
.second {
position: relative;
width: 100%;
height: 686px;
}
.second p {
font-size: 72px;
font-weight: 100;
margin: 0px 25px;
position: relative;
}
.second p::before {
content: "";
display: block;
position: absolute;
width: 77px;
height: 77px;
border: 2px solid RGB(250, 68, 8);
border-radius: 50px;
left: -18px;
top: 4px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(0);
transform: scale(0);
}
.second h2 {
margin: 8px;
font-size: 30px;
font-weight: 400;
line-height: 34px;
}
.second span {
font-weight: 700;
text-transform: uppercase;
}
.second_left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 686px;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.second_left img {
max-width: 525px;
}
.second_left_img1 {
display: none;
}
.second_left_img2 {
display: none;
}
.second_clean {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.second_clean:hover p::before {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
}
.second_antiseptic {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 70px 0px;
}
.second_antiseptic:hover p::before {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
}
.second_smell {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.second_smell:hover p::before {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(1);
transform: scale(1);
}
<div class="second">
<div class="row justify-content-between align-items-center">
<div class="col-md no-gutters">
<div class="second_left">
<img class="second_left_img1" src="http://cdn.oboi7.com/8ddd6d3d36aa610d0e108d63df5161096586a331/oblaka-pejzazhi-derevya-trava-ozera-nebo.jpg">
<img class="second_left_img2" src="http://cdn.oboi7.com/8ddd6d3d36aa610d0e108d63df5161096586a331/oblaka-pejzazhi-derevya-trava-ozera-nebo.jpg">
<img class="second_left_img3" src="http://cdn.oboi7.com/8ddd6d3d36aa610d0e108d63df5161096586a331/oblaka-pejzazhi-derevya-trava-ozera-nebo.jpg">
</div>
</div>
<div class="col-md-auto">
<div class="second_clean">
<p>1</p>
<h2>Уберем плесень и грибок<br><span>Паром при 120°С</span></h2>
</div>
<div class="second_antiseptic">
<p>2</p>
<h2>Закрепим эффект немецкой <br>химией <span>CONDICLEAN™</span></h2>
</div>
<div class="second_smell">
<p>3</p>
<h2>Почистим дренаж - <br><span>Устраним на 100% риск</span><br> протечки и неприятного запаха</h2>
</div>
</div>
</div>
Картинка как должно быть:
.second_clean
и размещайте нужную картинку для данного экрана. И т. д. Зачем? да за тем, что потом будет проще написать плагин для ваших задач. – Андрей ProjectSoft 29 мар '18 в 7:55