Ограничить величину тени от ширины блока
Привет всем! У меня есть такая задача: есть блок, с фотографией. На него наложен другой блок, который полностью её закрывает. При ховере должна появиться "дырка", через которую будет виден центральный участок фотографии. Проблема в следующем: блок с фото будет изменять размер (это слайд). И с определённого момента, если привязывать закрывающий блок к размерам фото, дырка станет гораздо больше, чем размер фото, и обрежется overflow: hidden. Но мне нужно, чтобы раскрытие не выходило за пределы фотографии. Можно ли это сделать стилями, а не JS, и как?
Тестовый пример не знаю, как создать здесь, вот ссылка на песочницу, в ней пример есть. https://thimbleprojects.org/alessio18911/575538 |
я бы сделал обертку для изображения и overlay-я с position relative, overlay-ю и img дать размер 100%.
|
Диаметр окружность при наведении составляет 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>
|
Спасибо! )
|
Спасибо, что не прошли мимо :)
|
| Часовой пояс GMT +3, время: 12:25. |