Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Видный hover-эффект CSS3 для картинки бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
22.12.2023, 21:17
Видный hover-эффект CSS3 для картинки




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

Здесь мы как можно подробно, где разберем этот эффект, чтоб он был понятен для обывателя, где основном все заправляет CSS3, как эффекты, так и стилистику. Но также запоминающий hover эффект, а точнее как его добиться, и как можно самостоятельно редактировать со скоростью производства. Это делает вебмастер под свое виденье или кто-то посчитает, что под такой дизайн сайта, hover эффект должен быть как можно быстрее показывать данные.

Так реально смотрится после установочного процесса:




Изначально здесь представлен эффект, то пришлось немного добавить стилистики. Это для того, чтоб было можно наблюдать блок, где будет находиться картинка, что на светлом фоне появятся тени.

Установка:

1. HTML-код

Здесь нужно прописать данный код на странице вашего сайта:

Код

<div class="osnova_karkasa">
  <img src="Ссылка на изображение" title="" alt="" />
  <div class="nazvane_snimka">ZorNet.Ru — сайт для вебмастера</div>
</div>


Далее переходим к стилям!

2. CSS

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

Код

.osnova_karkasa {
  display: block;
  height: 284px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 528px;
  border-radius: 3px;
  border: 2px solid #f1f1f1;
  box-shadow: 1px 1px 5px 0px rgb(78 75 75 / 71%), 0px 0px 3px 0px rgb(66 66 66 / 60%);
}
.osnova_karkasa img {
  transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  -webkit-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
}
.osnova_karkasa .nazvane_snimka {
  background: rgb(10 11 28 / 68%);
  bottom: 0;
  color: #f5efef;
  display: table;
  left: 0;
  opacity: 0;
  padding: 10px 0;
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  width: 528px;
  text-align: center;
  cursor:pointer;
}
.osnova_karkasa:hover .nazvane_snimka {
  opacity: 1;
}
.osnova_karkasa:hover img {
  transform: scale(1.5) rotateZ(-7deg);
  -moz-transform: scale(1.5) rotateZ(-7deg);
  -webkit-transform: scale(1.5) rotateZ(-7deg);
  -o-transform: scale(1.5) rotateZ(-7deg);
  cursor:pointer;
}


А теперь внимание, так как CSS-cвойства transform поддерживаются не всеми браузерами, то мы прописали с начало стандартные свойства, а далее придется задействовать нестандартные, что идут с префиксами браузеров.

Код

transform: стандартное правило;
-webkit-transform: Chrome и Safari;
-moz-transform: Firefox;
-o-transform: Opera;


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

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

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

Скачать Видный hover-эффект CSS3 для картинки
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 21 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Кисть для ...
    PlayGOGO д...
    Рип OREL-C...
    Кисть для ...
    WebCoder
    • WebCoder
    • Просмотров: 212
    • Дата: 07.01.2021
    CoffeeCup ...
    Скрап набо...