Я сделал фотоальбом того, чего я надеюсь достичь, но в основном это выглядит так:
1) Ряд из 4 базовых отдельных изображений.
2) При наведении / наведении курсора на каждое изображение отображается большее изображение, непосредственно в том же месте .
3) При нажатии на это большое изображение, информационное поле отображается ниже.
Я начал возиться с этой концепцией, используя чистый CSS.Я создал 4 пустых div с их собственными идентификаторами.Я указал background-image для их состояния по умолчанию (устанавливая высоту / ширину базового изображения) и заставил все 4 деления плавать влево.Дисплей был идеальным для начала.Затем я добавил класс CSS (id): hover для каждого элемента div, заменив базовое фоновое изображение новым большим изображением.Вот примерный фрагмент кода:
#box01 {
width: 213px;
height: 241px;
background-image: url(box01.png);
background-repeat: no-repeat;
float: left;
}
#box01:hover {
width: 353px;
height: 353px;
background-image: url(box01-big.png);
background-repeat: no-repeat;
}
<div id="boxes">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
<div id="box04"></div>
</div>
Эта функция работает, но проблема в том, что большое изображение в основном занимает пространство.Смотрите это как пример.
Отображение информационного окна не кажется слишком сложным (похоже на событие onclick для переключения отображения div), но яЯ задаюсь вопросом о движении каждой коробки.У меня была мысль о том, чтобы потенциально сделать второй ряд изображений (большие версии) прямо поверх базовых изображений, и каким-то образом сделать так, чтобы при опрокидывании image01 изменилась видимость image01-big, чтобы он все еще находился вто же самое место без смещения базовых изображений.
Тем не менее, кажется, что это лучше подходит для JavaScript или JQuery, верно?Я не слишком опытен в этом, но я хотел бы учиться, и это кажется довольно приличным проектом, который поможет мне сделать это.
Кто-нибудь сможет указать мне правильное направление для того, чего я хочу достичь?Будь то учебник по этой концепции или что-то еще, я был бы очень признателен!Я провел некоторое исследование и нашел несколько руководств по ролловеру, но ничего достаточно конкретного, чтобы справиться с проблемой, с которой я сталкиваюсь здесь - смежные элементы, перемещающиеся по странице в целом ...