CSS переопределяется с базы фундамента ⇐ Html

[Anonymous]

Следующий HTML -код генерируется для создания просмотра изображения. < /p>

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

[url=#image1]
[img]storage/f_1.jpg[/img]
[/url]

[url=#image2]
[img]storage/f_2.jpg[/img]
[/url]

[url=#image3]
[img]storage/f_3.jpg[/img]
[/url]

[url=#image4]
[img]storage/f_4.jpg[/img]
[/url]

[url=#image5]
[img]storage/f_5.jpg[/img]
[/url]

[url=#image6]
[img]storage/f_6.jpg[/img]
[/url]

[url=#image7]
[img]storage/f_7.jpg[/img]
[/url]

[url=#image8]
[img]storage/f_8.jpg[/img]
[/url]



[url=#]
[img]/storage/m/f_1.jpg[/img]
[img]/storage/m/f_2.jpg[/img]
[img]/storage/m/f_3.jpg[/img]
[img]/storage/m/f_4.jpg[/img]
[img]/storage/m/f_5.jpg[/img]
[img]/storage/m/f_6.jpg[/img]
[img]/storage/m/f_7.jpg[/img]
[img]/storage/m/f_8.jpg[/img]
[/url]

< /code>
Определенные классы CSS < /p>
.SlideBox div {
visibility: hidden;
position: fixed;
z-index: 85;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.SlideBox div:before {
content: '';
position: fixed;
z-index: 64;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.SlideBox div img {
position: relative;
z-index: 97;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.SlideBox div:target { visibility: visible; }
.SlideBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.SlideBox div:target img {
margin-left: 0px;
opacity: 1;
}
< /code>
Проблема в том, что щелчок по ссылкам не активирует внешний вид полноразмерного изображения и его перехода.  На практике страница вызывается, нажимая на ссылку, которая охватывает изображение, не изменяется на странице.  Добавление #Image1 

в URL -адрес генерирует желаемый эффект (переход, фон и большое изображение), но обратно на странице не обращает вспять переход и не возвращается на начальное состояние страниц
Поскольку библиотека Foundation 6 установлена, очень сильное подозрение состоит в том, что некоторые атрибуты CSS из библиотеки препятствуют переходу и должны быть переоценены. < /P>
Браузер поднимает следующее. Атрибуты для IMG и из файла Foundation CSS, которые активно применяются в браузере.

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

img {
display: inline-block;
vertical-align: middle;
height: auto;
}
a {
cursor: pointer;
}
*, {box-sizing: inherit;}

Чего не хватает, чтобы реализовать ожидаемый переход (и обратно?)

Подробнее здесь: https://stackoverflow.com/questions/794 ... ation-base