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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!