Необходимо сделать модальное окно из элемента слайдера с его контентом. Слайдер для тач устройств.
То есть, кликаешь на элемент слайдера, это окно плавно увеличивается относительно того, на котором кликнули и становится посередине страницы сохраняя свой контент, при этом бэкграунд затемняется.
Моя проблема в том, что не могу придумать как это правильно сделать да еще и с анимацией увеличения на минимум js (без jquery) и максимум css.
html
<div class="wrapper">
<div class="slider" style="transform: translate3d(-0px, 0px, 0px);">
<div class="scenario-large">
<div class="scenario-large__content__icon"><img alt=""/></div>
<div class="wrap-container">
<div class="scenario-large__content__text-large">Параметр 1</div>
<div class="scenario-large__content__text-small">123</div>
</div>
</div>
<div class="scenario-large">
<div class="scenario-large__content__icon"><img alt=""/></div>
<div class="wrap-container">
<div class="scenario-large__content__text-large">Параметр 2</div>
<div class="scenario-large__content__text-small">Параметр</div>
</div>
</div>
<div class="scenario-large">
<div class="scenario-large__content__icon"><img alt=""/></div>
<div class="wrap-container">
<div class="scenario-large__content__text-large">Параметр 2</div>
<div class="scenario-large__content__text-small">Параметр</div>
</div>
</div>
<div class="scenario-large">
<div class="scenario-large__content__icon"><img alt=""/></div>
<div class="wrap-container">
<div class="scenario-large__content__text-large">Параметр 2</div>
<div class="scenario-large__content__text-small">Параметр</div>
</div>
</div>
<div class="scenario-large">
<div class="scenario-large__content__icon"><img alt=""/></div>
<div class="wrap-container">
<div class="scenario-large__content__text-large">Параметр 2</div>
<div class="scenario-large__content__text-small">Параметр</div>
</div>
</div>
</div>
</div>
css
.wrapper {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
width: 570px;
height: 250px;
background: rgba(1, 1, 1, 0.2);
}
.slider {
width: 1250;
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
}
.scenario-large{
z-index:2;
transition: all 0.1s ease-out 0.2s;
margin-left: 10px;
min-width: 200px;
min-height: 120px;
max-width: 200px;
max-height: 120px;
border-radius: 20px;
background: #F7F7F7;
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
.scenario-large__content__icon {
width: 24px;
height: 24px;
margin: 15px 0 25px 15px;
background-color: black;
}
.wrap-container {
margin: 0px 25px 15px 15px;
.scenario-large__content__text-large {
font-weight: bold;
font-size: 14px;
color: #333333;
letter-spacing: 0;
}
.scenario-large__content__text-small {
font-size: 12px;
color: #858585;
}
}
}