CODEWITHSUNDEEP
csswebviewelectron
Piter Parker
Piter Parker

Reputation: 275

CSS transform on div should not affect the webview inside

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>

Upvotes: 0

Views: 342

Answers (2)

Temani Afif
Temani Afif

Reputation: 272947

Instead of using scale you can increase the height/width of the div to avoid the zoom effect of the content. In order to do that use position:absolute with your elements and adjust top/left/right/bottom properties instead of transform-origin.

Here is an example (I replaced webview with some content to show result here)

html,
body {
  /* added rule */
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.box {
  position: absolute;
  text-align:center;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: all 0.5s;
}
.box img {
 max-width:100%;
 max-height:50%;
}

.box:hover {
  width: 100%;
  height: 100%;
  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;
  top: 0;
  left: 0;
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  top: 0;
  right: 0;
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  left: 0;
  bottom: 0;
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  right: 0;
  bottom: 0;
}
<body>
  <div class="box" id="lo">
    <h1>Title</h1>
    <img src="https://lorempixel.com/400/400/" >
  </div>
  <div class="box" id="ro">
    <h1>Title</h1>
    <img src="https://lorempixel.com/500/500/" >
  </div>
  <div class="box" id="lu">
    <h1>Title</h1>
    <img src="https://lorempixel.com/600/400/" >
  </div>
  <div class="box" id="ru">
    <h1>Title</h1>
    <img src="https://lorempixel.com/400/500/" >
  </div>
</body>

Upvotes: 1

Kosh
Kosh

Reputation: 18393

If you cannot accept @TemaniAfif's suggestion (which looks great), you might back-scale your webviews:

html,
body {
  /*  added rule  */
  margin: 0;
  height: 100%;
  border: 100px;
}

webview {
  display: block;
  height: 100%;
  width: 100%;
  border: solid 10px #693;
  box-sizing: border-box;
  transform-origin: left top;   
  transition: all .5s .5s
}

.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s .5s, /*  changed property  */
  z-index 0.5s .5s;
}

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

.box:hover webview {
  transform: scale(.5);
  height: 200%;
  width: 200%
}

#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  */
}
<body>
  <div class="box" id="lo">
    <webview src="https://ebay.de">ebay.de</webview>
  </div>
  <div class="box" id="ro">
    <webview src="https://ebay.com">ebay.com</webview>
  </div>
  <div class="box" id="lu">
    <webview src="https://ebay.fr">ebay.fr</webview>
  </div>
  <div class="box" id="ru">
    <webview src="https://ebay.co.uk">ebay.co.uk</webview>
  </div>
</body>

Upvotes: 0

Related Questions