Всплывающие фото-подсказки

Пример:

Пример текста с всплывающими фотографиями на ссылках. Для того чтобы создать такую ссылку, нужно добавить к ней класс hover-img и дата-атрибут data-url, в котором прописать путь до фотографии

Картинку можно прикрутить и к другим тегам, например span: раз и два

HTML:

<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>

Пример текста с <a href="#url" class="hover-img" data-url="/photo.jpg">фото-подсказкой</a>

</div>

</div>

CSS:

.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%;
}

.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:

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 +")";
		});
	}
})

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

g: 01.05.2023 в 03:52

Как на одном html использовать один и тот же id? "cursor" в разных местах

Ответить
Дима: 13.01.2022 в 17:23

Наверно это с редактором связано CKEditor

Ответить
- Alexander: 13.01.2022 в 19:04
  
  Скорее всего он.
  С ними вечные проблемы, они то <p> или <span> навтыкают, то наоборот, удалят что то.
  
  Ответить
  - Дима: 14.01.2022 в 12:16
    
    Спасибо! Поставил другую версию редактора - всё ок 🙂
    
    Ответить
Дима: 13.01.2022 в 17:21

Добрый день!
Что-то, если поставить фото на ссылки, а затем зайти снова в редактирование записи, то потом при сохранении пропадает в <div class="section-img">
Пример текста с <a href="#url" class="hover-img" data-url="/photo.jpg">фото-подсказкой</a>
</div>

Вот этот момент - data-url="/photo.jpg" и, разумеется, фото уже на сайте не показывает 🙁

Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: