CSS से होवर पर एलिमेंट को ज़ूम/स्केल कैसे करें?

CSS से होवर पर एलिमेंट को ज़ूम/स्केल करने के लिए, कोड निम्नानुसार है -

उदाहरण

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box;    }    .zoomDiv {       padding: 50px;       background-color: yellow;       transition: transform 0.2s;       width: 200px;       height: 200px;       margin: 70px;       border-radius: 50%;       border: 4px solid rgb(78, 37, 155);    }    .zoomDiv:hover {       transform: scale(1.5);    } </style> </head> <body> <h1>Zoom on Hover Example</h1> <h2>Hover over the below element to see it zoom.</h2> <div class="zoomDiv"></div> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

पीले सर्कल पर होवर करने पर -