Zoom auf Box legen
basti1012 kannst Du mir bitte zeigen, wie ich möglichst einfach den Inhalt von einer Box bei hover in einem pop-up Fenster vergrössert darstellen kann. Auf der jetzt vorhandenen Seite hat es
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
main{
display:flex;
flex-direction:column;
}
nav{
display:flex;
}
.box{
height:48vh;
width:48vw;
border:1px solid red;
transition:all 1s;
}
.box:hover{
text-align:center;
font-size:400%;
}
#go1:hover{
transform:scale(2) translate(25%,25%);
transition:all 1s;
background:red;
}
#go2:hover{
transform:scale(2) translate(-25%,25%);
transition:all 1s;
background:blue;
}
#go3:hover{
transform:scale(2) translate(25%,-25%);
transition:all 1s;
background:yellow;
}
#go4:hover{
transform:scale(2) translate(-25%,-25%);
transition:all 1s;
background:green;
}
</style>
<main>
<nav>
<div id="go1" class="box">Zoom</div>
<div id="go2" class="box">Zoom</div>
</nav>
<nav>
<div id="go3" class="box">Zoom</div>
<div id="go4" class="box">Zoom</div>
</nav>
</main>