2 Эффекта для изображений на простом CSS - Скачать для фотошопа и сайта

Регистрация Вход

Главная сайта

Форум Все для фотошопа и сайта

Страница 1 из 1
1

Скачать для фотошопа и сайта » Форум Платформ для сайтов » Все для uсoz » Скрипты для Ucoz » 2 Эффекта для изображений на простом CSS

2 Эффекта для изображений на простом CSS

diamont1977 Контакты diamont1977

Дата: Пятница, 22.12.2023, 20:52 | Сообщение # 1

Администраторы

Сообщений:: 1542

Замечания:: 0

Offline

2 Эффекта для изображений на простом CSS

Здесь представлены 2 эффекта при наведении клика на них, что выполнены на чистом CSS, но главное в HTML по умолчанию прописаны операторы под uCoz. Это для тех веб мастеров, у которых ресурс установлен на конструкторе. Это так для понимания, чтоб вам не нужно добавлять или менять. Но при этом сами эффекты обширны, что можно установить на сайт или блог разного хостинг. Ведь, если посмотреть на demo страницу, то там все операторы убраны, чтоб не мешали, а оставлена одна анимация, которая состоит из стилистики CSS.

Этот эффект попался, и если его реально применить на разном устройстве, примерно как на слайдере, что идет в одну колонку, то смотрится оригинально. Один из них делает полный разворот, где при этом картинка немного увеличивается, и все это, пока курсор находится на снимке.

Второй немного проще, где при наведении он увеличивается на несколько пикселей. Но все это настраивается в закрепленных стилях, где их немного для задействования анимационного эффекта, где изначально выставляем высоту и ширину данного изображение.

За пример можно взять слайдер для применение или другие элементы.

Первый вариант под увеличение изображений на сайте:

Установка:

HTML

Код

<a href="$ENTRY_URL$" title="$TITLE$"><span class="movie-name">$TITLE$, $ENTRY_CATS$</span><img id="li" src="$IMG_URL$" width="156" height="194" alt="$TITLE$" /></a>

CSS

Код

#li{transition: 1s; position: relative; opacity:0.6;} #li:hover{transform: scale(1.1) rotate(360deg); transition: 1s all; opacity:1;}

На этом установочный процесс завершен.

Второй вариант состоит в развороте снимка с увеличением:

Как заметили, второй вариант изначально идет без оператора, здесь нужно только заполнить или прописать ссылку под данный снимок. Но и HTML и CSS сделаны вместе, где и на первом варианте можно все выставить, чтоб быстро поставить по месту, где должны снимки отображаться.

HTML

Код

<a href="#" style="text-decoration: none;" ><img id="m" src="Здесь ссылка изображения или данный оператор, что выводит картинку" style="height:138px; width:104px;"></a> <style> #m{ transition: 1s; position: relative; opacity:0.5; } #m:hover{ transform: scale(1.1); transition: 1s all; border:2px;border-radius:8px; border-color: #ffffff; opacity:1.0; } </style>

На этом все, сама анимация по своему оригинальна, где вы самостоятельно можете задать скорость разворота, а также на сколько пикселей нужно увеличение с прописанными тенями, но если ставить под светлый формат.

Демонстрация

Скаать 2 Эффекта для изображений на простом CSS

Прикрепления: 3948489.jpg (26.1 Kb) · 9867014.jpg (12.5 Kb)

Страница 1 из 1
1