How to scale an image on click?

T

tj572018-02-22 21:34:42

css

tj57, 2018-02-22 21:34:42

There is an image on the site. It is necessary that when clicked it increases and occupies the entire screen, when clicked again it decreases and takes the initial position, and it should also decrease back when scrolling. Here is an example: https://blog.figma.com/what-teslas-model-3-ui-reve... (a picture with a Tesla salon).

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladimir, 2018-02-22
@vchubar

If without JS, then for example like this:

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

Scroll folding can be done with JS.