Может кто подскажет как такое можно сделать на CSS. Cделал модальное окно вызываемое по клику на изображении, а сейчас хочу приделать к нему слайдер... но не соображу, как сделать так, чтобы слайдер включался в модальном окне, а не вне его...
.ivanov_01 {
background: url(http://side-sunny.ru/projects/15_Ivanov/01.jpg);
}
.ivanov_02 {
background: url(http://side-sunny.ru/projects/15_Ivanov/02.jpg);
}
.ivanov_03 {
background: url(http://side-sunny.ru/projects/15_Ivanov/03.jpg);
}
.galery_image {
float: left;
margin: 25px 12px;
}
.galery_image a {
display: block;
height: 300px;
width: 400px;
background-size: cover;
background-position: center;
margin: 15px auto;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.galery_image a:focus {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 450px;
width: 600px;
margin: auto;
border: 12px solid rgba(255, 255, 255, 1.0);
border-radius: 10px;
cursor: default;
-webkit-box-shadow: 0 0 20px rgba(30, 30, 30, 1.0), 0 0 0 1000px rgba(120, 120, 120, .5);
box-shadow: 0 0 20px rgba(30, 30, 30, 1.0), 0 0 0 1000px rgba(120, 120, 120, .5);
z-index: 2;
}
.close {
display: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: rgba(255, 200, 60, 1.00);
height: 55px;
width: 55px;
border: 8px solid rgba(255, 255, 255, 1.0);
border-radius: 30px;
position: absolute;
top: -30px;
right: -30px;
}
.close::after {
content: "";
background: url(http://side-sunny.ru/x.png);
height: 23px;
width: 23px;
margin: auto;
}
.galery_image a:focus .close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.close:hover {
background: rgba(240, 160, 60, 1.00);
cursor: pointer;
}
.inner {
width: 300%;
}
.page {
float: left;
width: 33.333%;
}
.page [class^=ivanov_] {
width: 400px;
height: 300px;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slides .inner {
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div id="slider" class="galery_image">
<input type="radio" name="slider" id="slide1" checked="">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<div id="slides">
<div class="inner">
<div class="page">
<a href="#" class="ivanov_01">
<div tabindex="0" class="close"></div>
</a>
</div>
<div class="page">
<a href="#" class="ivanov_02">
<div tabindex="0" class="close"></div>
</a>
</div>
<div class="page">
<a href="#" class="ivanov_03">
<div tabindex="0" class="close"></div>
</a>
</div>
</div>
</div>
</div>
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как в нижеуказанном коде записать наличие значения в input'ах в sessionStorage (localStorage)? Сейчас сохраняется только последнее значениеСмотреть код...
Как сделать анимацию такую же как на https://aviaparkcom/ при наведении на блоки