I load website in with webviews into my div container.
The divs will take the whole screen when they get hovered.

The problem is, that the content of the webview gets affected, too with the scale of the divs.

Instead of scaling the content (in the webview its like zoom) I only want to scale the div to get the full screen of the website within.

css

```
html, body {                            /*  added rule  */
  margin: 0;
  height: 100%;
  border: 100px;
}
.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s,          /*  changed property  */
              z-index 0.5s;
}

.box:hover {
  transform: scale(2);                  /*  added property  */
  transition-delay:0.5s;
  z-index: 10;                     /*  added so hovered is on top  */
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  transform-origin: left top;           /*  added property  */
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  transform-origin: right top;          /*  added property  */
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  transform-origin: left bottom;        /*  added property  */
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  transform-origin: right bottom;       /*  added property  */
}

```

html:

```
<body>
  <div class="box" id="lo">
  <webview src="https://ebay.de" style="height: 100%; width: 100%"></webview>
  </div>
  <div class="box" id="ro">
    <webview src="https://ebay.com" style="height: 100%; width: 100%"></webview>
  </div>
<div class="box" id="lu">
<webview src="https://ebay.fr" style="height: 100%; width: 100%"></webview>
</div>
<div class="box" id="ru">
<webview src="https://ebay.co.uk" style="height: 100%; width: 100%"></webview>
</div>
</body>

```