@tj57

Как масштабировать изображение при клике?

Есть изображение на сайте. Нужно, чтобы при клике оно увеличивалось и занимало весь экран, при повторном клике уменьшалось и занимало начальную позицию, также оно должно уменьшаться обратно при скролле. Вот пример : https://blog.figma.com/what-teslas-model-3-ui-reve... (картинка с салоном теслы).
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
@vchubar
Backend
Если без JS, то например так:
<html>
<head>
<style>
	.blokimg {
	position: relative;
	}
	.overlay{
	display: none;
	height: auto;
	left: -15%;
	position: absolute;
	top: -50%;
	width: auto;
	z-index: 999;
	}
	.overlay .overlay_container{
	display: table-cell;
	vertical-align: middle;
	}
	.overlay_container img{
	background-color: #AB5;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}
	.overlay:target {
	display: table;
	}
</style>
</head>
<body>
	<div class="blokimg">
	<div class="overlay" id="contenedor1">
	<div class="overlay_container">
		<a href="#close">
			<img src="большое_изображение"/>
		</a>
	</div>
	</div>
	<a href="#contenedor1">
		<img src="маленькое_изображение" id="imagenM1" />
	</a>
	</div>
</body>
</html>


Сворачивание по скроллу можно прикрутить с помощью JS.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Biganto Москва
от 130 000 до 130 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
18 авг. 2018, в 01:10
17000 руб./за проект
17 авг. 2018, в 23:00
5500 руб./за проект