«Нажмите, чтобы увеличить» простой тег с чистым CSS и без изменений HTML. ⇐ Html

[Anonymous]

Я работаю над веб-сайтом, на котором я могу контролировать только часть кода CSS. Я не могу добавить код JavaScript, а также не могу изменить HTML-код веб-страниц (поскольку он создается компилятором Markdown, и хотя Markdown поддерживает вставку тегов HTML, контент пишется без них, чтобы HTML был абстрактным).
На некоторых веб-страницах есть изображения. Они отображаются как простые (сгенерированные) теги

), вот уменьшенная версия последнего Codepen:

Код: Выделить всё

* body {
background-color: white;
}

.container {
width: 100%;
height: 100%;
}

.trans {
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}

.top {
display: flex;
width: 80vw;
height: 80vh;
margin-top: 10vh;
margin-left: auto;
margin-right: auto;
margin-bottom: 10vh;
}

.top ul {
list-style: none;
width: 100%;
height: 100%;
z-index: 1;
box-sizing: border-box;
}

.top ul li {
position: relative;
float: left;
width: 25%;
height: 25%;
overflow: hidden;
}

.top ul li::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
content: '';
color: white;
opacity: 0.4;
text-align: center;
box-sizing: border-box;
pointer-events: none;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}

.top ul li:hover::before {
opacity: 0;
background-color: rgba(0,0,0,0.90);
}

.top ul li img {
width: 100%;
height: auto;
overflow: hidden;
}

.lightbox {
position: fixed;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.75);
z-index: 999;
opacity: 0;
pointer-events: none;
}

.lightbox img {
max-width: 90%;
max-height: 80%;
position: relative;
top: -100%;
/* Transition */
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}

.lightbox:target {
outline: none;
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 1.2s ease;
-moz-transition: all 1.2s ease;
-ms-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
-webkit-transition: all 1.2s ease;
}
.lightbox:target img {
top: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}

Код: Выделить всё

[list]
[*][url=#img_1]
[img]https://image.freepik.com/free-photo/road-curve-landscape_426-19324358.jpg[/img]
[/url]
[/list]
[url=#_1]
[img]https://image.freepik.com/free-photo/road-curve-landscape_426-19324358.jpg[/img]
[/url]

Подробнее здесь: https://stackoverflow.com/questions/770 ... ml-changes