Пример:
Пример текста с всплывающими фотографиями на ссылках. Для того чтобы создать такую ссылку, нужно добавить к ней класс hover-img
и дата-атрибут data-url
, в котором прописать путь до фотографии
Картинку можно прикрутить и к другим тегам, например span
: раз и два
HTML:
1 2 3 4 5 6 |
<div class="section-row"> <div class="section-img"> Пример текста с <a href="#url" class="hover-img" data-url="/photo.jpg">фото-подсказкой</a> </div> <div class="cursor" id="cursor"></div> </div> |
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.section-img { text-align: center; padding: 40px 0; font-size: 24px; line-height: 36px; font-family: 'Roboto', sans-serif; } .cursor { position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50%; z-index: -1; height: 50px; width: 50px; transition: all 200ms ease-out; background-position: center; background-size: 0 0; border: 4px solid #BFE2FF; display: none; } .section-row:hover .cursor { display: block; } .cursor.hover { height: 240px; width: 240px; z-index: 1; background-size: cover; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4); } .cursor.hide-cursor { display: none; } .hover-img { position: relative; display: inline-block; text-decoration: none; color: #337AB7; transition: color 250ms ease; } .hover-img:before{ position: absolute; content: ''; height: 0; bottom: 0; left: -10px; width: calc(100% + 20px); border-radius: 2px; display: block; background-color: #BFE2FF; transition: height 250ms ease; mix-blend-mode: multiply; opacity: 0.6; } .hover-img:hover{ z-index: 5; color: #000; } .hover-img:hover:before { height: 100%; } |
Если нужно убрать кружок, который бегает за курсором, то заменяем высоту и ширину у класса cursor
на 0
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
let t = document.getElementById("cursor"); document.querySelector(".section-row").addEventListener("mousemove", function(n) { t.style.left = n.clientX + "px", t.style.top = n.clientY + "px" }); function n() { t.classList.add("hover") } function s() { t.classList.remove("hover") } function o(t) { t.addEventListener("mouseover", n), t.addEventListener("mouseout", s) } document.addEventListener('DOMContentLoaded', function () { let hoverLink = document.querySelectorAll(".hover-img"); for (let i = 0; i < hoverLink.length; i++){ o(hoverLink[i]); let url = hoverLink[i].getAttribute("data-url"); hoverLink[i].addEventListener('mouseenter', function () { t.style.backgroundImage = "url("+ url +")"; }); } }) |
За основу взято решение, найденное на codepen.io у пользователя Ivan Grozdic
Фотографии: kellepics
Как на одном html использовать один и тот же id? "cursor" в разных местах
Наверно это с редактором связано CKEditor
Скорее всего он.
С ними вечные проблемы, они то <p> или <span> навтыкают, то наоборот, удалят что то.
Спасибо! Поставил другую версию редактора - всё ок 🙂
Добрый день!
Что-то, если поставить фото на ссылки, а затем зайти снова в редактирование записи, то потом при сохранении пропадает в <div class="section-img">
Пример текста с <a href="#url" class="hover-img" data-url="/photo.jpg">фото-подсказкой</a>
</div>
Вот этот момент - data-url="/photo.jpg" и, разумеется, фото уже на сайте не показывает 🙁