Эффект картинок на CSS идущий за курсором | |
| В статье узнаете, как реализовать оригинальный эффект на CSS и jQuery, который происходит при наведении на изображение с разного радиуса галереи. А точнее мы открываем фотоальбом или галерею, где представлены картинки в несколько колонок. И надавим на одну их картинок, что автоматически по вверх появляется темно прозрачная гамма с названием данного снимка. И стоит только провести клик на другой скрин, как видим эффект продвижение эффекта, что смотрится просто обворожительно для данного сайта, будь он в светлом или темном формате. Это красивый эффект наведения курсора с учетом направления с использованием чистого CSS, который производиться в соответствии с направлением мыши. По сути мы делаем наведение для увеличения, а здесь автоматически появляется анимация, которая работает с учетом направления, где наблюдаем на каком снимке курсор, а также краткую информацию. Такой трюк отлично будет смотреться на отдельных тематических страницах, а так же как представление данного материала. Такой дизайнерский трюк анимации безусловно привлекает людей, так как смотрится очень круто. Другими словами, эффект наведения будет строго проявляется в заданной точке или стороне, куда гости и пользователи сайта перемещают курсор мыши. Установка: Прописываем в NEAD Код <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> HTML Код <ul class="setka_modulan"> <li> <a href="#"> <img src="Изображение в качестве ссылки #1" alt="Первая"> <span class="kudecision">First Image</span> </a> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #2" alt="Вторая"> </a> <span class="kudecision">Красивая анимация</span> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #3" alt="Третья"> <span class="kudecision">Стильный обзор</span> </a> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #4" alt="Четвертая"> <span class="kudecision">Графика для сайта</span> </a> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #5" alt="Пятая"> <span class="kudecision">Актуальный раздел</span> </a> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #6" alt="Шестая"> <span class="kudecision">В статье узнаете</span> </a> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #7" alt="Седьмая"> <span class="kudecision">Множество Favicon</span> </a> </li> <li> <a href="#"> <img src="Изображение в качестве ссылки #8" alt="Восьмая"> <span class="kudecision">Всплывающие окна</span> </a> </li> </ul> CSS Код .setka_modulan { display: grid; grid-gap: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; height: 100vh; } .setka_modulan li { position: relative; } .setka_modulan li:hover ~ li:last-child:after, .setka_modulan li:last-child:hover:after, .setka_modulan li:hover ~ li:last-child:before, .setka_modulan li:last-child:hover:before { opacity: 1; transition: 1s ease; } .setka_modulan li:last-child:after, .setka_modulan li:last-child:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; pointer-events: none; clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset)); -webkit-clip-path: polygon(var(--offset) var(--offset), var(--offset) calc(100% - var(--offset)), calc(100% - var(--offset)) calc(100% - var(--offset)), calc(100% - var(--offset)) var(--offset)); opacity: 0; transition: opacity 1s, transform 1s 1s, background 1s; } .setka_modulan li:last-child:after { mix-blend-mode: multiply; background: #aab1cb; } .setka_modulan li:last-child:before { backdrop-filter: grayscale(100%) blur(2px); -webkit-backdrop-filter: grayscale(100%) blur(2px); } .setka_modulan li:nth-child(1):hover ~ li:last-child:after { background: #1eaccb; } .setka_modulan li:nth-child(2):hover ~ li:last-child:after { background: #3864bd; } .setka_modulan li:nth-child(3):hover ~ li:last-child:after { background: #dd3477; } .setka_modulan li:nth-child(4):hover ~ li:last-child:after { background: #e93422; } .setka_modulan li:nth-child(5):hover ~ li:last-child:after { background: #eba108; } .setka_modulan li:nth-child(6):hover ~ li:last-child:after { background: #62db63; } .setka_modulan li:nth-child(7):hover ~ li:last-child:after { background: #154a6a; } .setka_modulan li:last-child:hover:after { background: #f15e24; } .setka_modulan { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 33.3333333333%); } .setka_modulan li:last-child:after, .setka_modulan li:last-child:before { left: 100%; transform: translate3d(-100%, -100%, 0); } .setka_modulan li:nth-child(1):hover ~ li:last-child:after, .setka_modulan li:nth-child(1):hover ~ li:last-child:before { transform: translate3d(-200%, -200%, 0); } .setka_modulan li:nth-child(2):hover ~ li:last-child:after, .setka_modulan li:nth-child(2):hover ~ li:last-child:before { transform: translate3d(-100%, -200%, 0); } .setka_modulan li:nth-child(3):hover ~ li:last-child:after, .setka_modulan li:nth-child(3):hover ~ li:last-child:before { transform: translate3d(0%, -200%, 0); } .setka_modulan li:nth-child(4):hover ~ li:last-child:after, .setka_modulan li:nth-child(4):hover ~ li:last-child:before { transform: translate3d(-200%, -100%, 0); } .setka_modulan li:nth-child(5):hover ~ li:last-child:after, .setka_modulan li:nth-child(5):hover ~ li:last-child:before { transform: translate3d(-100%, -100%, 0); } .setka_modulan li:nth-child(6):hover ~ li:last-child:after, .setka_modulan li:nth-child(6):hover ~ li:last-child:before { transform: translate3d(0%, -100%, 0); } .setka_modulan li:nth-child(7):hover ~ li:last-child:after, .setka_modulan li:nth-child(7):hover ~ li:last-child:before { transform: translate3d(-200%, 0%, 0); } .setka_modulan li:last-child:hover:after, .setka_modulan li:last-child:hover:before { transform: translate3d(-100%, 0%, 0); } @media (max-width: 60em) { .setka_modulan { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 25%); } .setka_modulan li:last-child:after, .setka_modulan li:last-child:before { left: 0%; transform: translate3d(-50%, -150%, 0); } .setka_modulan li:nth-child(1):hover ~ li:last-child:after, .setka_modulan li:nth-child(1):hover ~ li:last-child:before { transform: translate3d(-100%, -300%, 0); } .setka_modulan li:nth-child(2):hover ~ li:last-child:after, .setka_modulan li:nth-child(2):hover ~ li:last-child:before { transform: translate3d(0%, -300%, 0); } .setka_modulan li:nth-child(3):hover ~ li:last-child:after, .setka_modulan li:nth-child(3):hover ~ li:last-child:before { transform: translate3d(-100%, -200%, 0); } .setka_modulan li:nth-child(4):hover ~ li:last-child:after, .setka_modulan li:nth-child(4):hover ~ li:last-child:before { transform: translate3d(0%, -200%, 0); } .setka_modulan li:nth-child(5):hover ~ li:last-child:after, .setka_modulan li:nth-child(5):hover ~ li:last-child:before { transform: translate3d(-100%, -100%, 0); } .setka_modulan li:nth-child(6):hover ~ li:last-child:after, .setka_modulan li:nth-child(6):hover ~ li:last-child:before { transform: translate3d(0%, -100%, 0); } .setka_modulan li:nth-child(7):hover ~ li:last-child:after, .setka_modulan li:nth-child(7):hover ~ li:last-child:before { transform: translate3d(-100%, 0%, 0); } .setka_modulan li:last-child:hover:after, .setka_modulan li:last-child:hover:before { transform: translate3d(0%, 0%, 0); } :root { --offset: 0; } } .kudecision { font-family: "Unica One", sans-serif; font-size: 1.25rem; position: absolute; display: block; right: 2rem; left: 2rem; text-align: center; top: 50%; width: 60px; margin: auto; color: white; z-index: 100; opacity: 0; transform: translate3d(0, -50%, 0); transition: .3s 0s; } li:hover .kudecision { opacity: 1; transition: .6s .3s; } На этом установка завершена! Видео по данному материалу, где можете увидеть материал виде галереи визуально, а также вы можете увидеть ее в живую, где внизу представлена ссылка на обзор по функциям. Видео обзор эффекта по направлению мыши: Из статьи вы узнали, как правильно создать оригинальный образ для следования наведение, которое перемещается в соответствии того, куда вы наведете курсор. Такой трюк используют в своей основе на восемь случайных изображений с закрепленными текстами. Где каждая картинка изначально имеет свой оригинальный текст, а также разную цветовую палитру. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |