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

Пример:

Пример текста с всплывающими фотографиями на ссылках. Для того чтобы создать такую ссылку, нужно добавить к ней класс 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

Karat: 22.06.2025 в 08:49

Вот доработанный код. теперь можно ставить несколько ссылок на одну страницу.

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

<div class="section-row">
<div class="section-img">
Пример текста с <a href="#url" class="hover-img" data-url="https://atuin.ru/demo/640/TimHill-4.jpg">фото-подсказкой</a>
</div>
<div class="cursor"></div>
</div>

<div class="section-row">
<div class="section-img">
Пример текста с <a href="#url" class="hover-img" data-url="https://atuin.ru/demo/640/TimHill-3.jpg">фото-подсказкой 2</a>
</div>
<div class="cursor"></div>
</div>

document.addEventListener('DOMContentLoaded', function () {
// Для каждого section-row создаем свой курсор
const rows = document.querySelectorAll(".section-row");

rows.forEach(row => {
const cursor = row.querySelector(".cursor");
const hoverLink = row.querySelector(".hover-img");

// Обработка движения мыши
row.addEventListener("mousemove", function(e) {
cursor.style.left = e.clientX + "px";
cursor.style.top = e.clientY + "px";
});

// Обработка наведения на ссылку
if (hoverLink) {
hoverLink.addEventListener("mouseover", function() {
cursor.classList.add("hover");
const url = hoverLink.getAttribute("data-url");
cursor.style.backgroundImage = "url("+ url +")";
});

hoverLink.addEventListener("mouseout", function() {
cursor.classList.remove("hover");
});
}
});
});
[/code]

Ответить

g: 01.05.2023 в 03:52

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

Ответить
- Karat: 22.06.2025 в 08:49
  
  Вот доработанный код. теперь можно ставить несколько ссылок на одну страницу.
  
  [code]
  .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%;
  }
  
  <div class="section-row">
  <div class="section-img">
  Пример текста с <a href="#url" class="hover-img" data-url="https://atuin.ru/demo/640/TimHill-4.jpg">фото-подсказкой</a>
  </div>
  <div class="cursor"></div>
  </div>
  
  <div class="section-row">
  <div class="section-img">
  Пример текста с <a href="#url" class="hover-img" data-url="https://atuin.ru/demo/640/TimHill-3.jpg">фото-подсказкой 2</a>
  </div>
  <div class="cursor"></div>
  </div>
  
  document.addEventListener('DOMContentLoaded', function () {
  // Для каждого section-row создаем свой курсор
  const rows = document.querySelectorAll(".section-row");
  
  rows.forEach(row => {
  const cursor = row.querySelector(".cursor");
  const hoverLink = row.querySelector(".hover-img");
  
  // Обработка движения мыши
  row.addEventListener("mousemove", function(e) {
  cursor.style.left = e.clientX + "px";
  cursor.style.top = e.clientY + "px";
  });
  
  // Обработка наведения на ссылку
  if (hoverLink) {
  hoverLink.addEventListener("mouseover", function() {
  cursor.classList.add("hover");
  const url = hoverLink.getAttribute("data-url");
  cursor.style.backgroundImage = "url("+ url +")";
  });
  
  hoverLink.addEventListener("mouseout", function() {
  cursor.classList.remove("hover");
  });
  }
  });
  });
  [/code]
  
  Ответить
Дима: 13.01.2022 в 17:23

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

Ответить
- Alexander: 13.01.2022 в 19:04
  
  Скорее всего он.
  С ними вечные проблемы, они то [i]<p>[/i] или [i]<span>[/i] навтыкают, то наоборот, удалят что то.
  
  Ответить
  - Дима: 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:

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

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

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