Форум

Alessio18911 · #1 (**permalink**) 02.11.2018, 12:46

Привет всем! У меня есть такая задача: есть блок, с фотографией. На него наложен другой блок, который полностью её закрывает. При ховере должна появиться "дырка", через которую будет виден центральный участок фотографии. Проблема в следующем: блок с фото будет изменять размер (это слайд). И с определённого момента, если привязывать закрывающий блок к размерам фото, дырка станет гораздо больше, чем размер фото, и обрежется overflow: hidden. Но мне нужно, чтобы раскрытие не выходило за пределы фотографии. Можно ли это сделать стилями, а не JS, и как?
Тестовый пример не знаю, как создать здесь, вот ссылка на песочницу, в ней пример есть. https://thimbleprojects.org/alessio18911/575538

j0hnik · #2 (**permalink**) 02.11.2018, 18:10

я бы сделал обертку для изображения и overlay-я с position relative, overlay-ю и img дать размер 100%.

Malleys · #3 (**permalink**) 02.11.2018, 23:17

Диаметр окружность при наведении составляет 90% меньшей стороны

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1">
		<style>

figure {
	background: deeppink;
	display: inline-flex;
}

figure img {
	transition: 500ms;
	--mask:
	    radial-gradient(closest-side circle, black 90%, transparent calc(90% + 1px))
	    no-repeat center / 0 0;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	display: block;
}

figure:focus img,
figure:hover img {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
			
		</style>
	</head>
	<body>
		<figure tabindex="0">
			<img src="https://placeimg.com/320/240/animals">
		</figure>
		<figure tabindex="0">
			<img src="https://placeimg.com/640/480/animals">
		</figure>
	</body>
</html>

Alessio18911 · #4 (**permalink**) 13.11.2018, 11:31

Спасибо! )

Alessio18911 · #5 (**permalink**) 13.11.2018, 11:31

Спасибо, что не прошли мимо

Форум

Справочник

Discord чат

Курсы javascript