Простая галерея на чистом css

07.05.2020, 13:48. Показов 2574. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Подскажите, плиз, код простой галереи (для увеличения изображения) без всяких скриптов, на чистом css. Желательно на bootstrap 3.
Что-то не могу найти ни чего путевого.

Добавлено через 21 минуту
нашла, может кому пригодиться

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
img[tabindex="0"] {
  cursor: zoom-in;
}
img[tabindex="0"]:focus {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 99%;
  max-height: 99%;
  margin: auto;
  box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);
}
img[tabindex="0"]:focus,
img[tabindex="0"]:focus ~ * {
  pointer-events: none;
  cursor: zoom-out;
}
 
</style>

HTML5
1
2
3
4
5
6
7
<div class="row row-conformity row-centered">
<div class="col-sm-4"><img alt="" src="image/1-2.jpg" title="" width="350" tabindex="0"/></div>
 
<div class="col-sm-4"><img alt="" src="image/1-3.jpg" title="" width="350" tabindex="0"/></div>
 
<div class="col-sm-4"><img alt="" src="image/1-4.jpg" title="" width="350" tabindex="0"/></div>
</div>

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

Блог

07.05.2020, 13:48

Ответы с готовыми решениями:

Простая галерея с превью
Здравствуйте. Вот пример. del Т.е. там где "фото" - должен быть оригинал изображения А ниже превью, по которому можно...

Простая галерея: смена картинок по клику
Есть простая галерея из нескольких фото. <center> <div class="a1"> <img src="фото/1.jpg" width="55%"> ...

на чистом css
как написать такое на чистом css. Я знаю о превдоклассе hover. Но только на css.

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

Блог

07.05.2020, 13:48

Помогаю со студенческими работами здесь

Карусель на чистом CSS
Здравствуйте. Мне нужно сделать карусель карточек товаров на чистом css. У меня есть карточки товаров, но мне нужно добавить кнопки...

Аккордеон на чистом CSS
<div class="ck"> <input type="checkbox" id="ckb"> <label for="ckb">Open</label> ...

Окантовка на чистом CSS
Хочу оговорится, необходима поддержка ie8 , возможно ли сделать такую вот цветную оконтовочку по краях?

Табы на чистом CSS
Помогите сделать горизонтальный спойлер(ы), чтоб несколько в горизонт располагались. Но тело самого спойлера (где показывается скрытая...

Спойлер на чистом CSS
Помогите решить задачку. Дано: ДВА СПОЙЛЕРА на чистом CSS? расположены горизонтально друг за другом. Вопрос: как сделать,...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .

Наверх