Zoom div by percentage using CSS

This little example mark-up shows you how to zoom in a div by a specific percentage using only CSS.

  1. <html>
  2. <body>
  3. <div id=“sampleDiv” style=“width: 100px; background-color: Gray;”>
  4. Zoom Me
  5. </div>
  6. <button onclick=“sampleDiv.style.zoom=’300%'”>Zoom 300%</button>
  7. <button onclick=“sampleDiv.style.zoom=’200%'”>Zoom 200%</button>
  8. <button onclick=“sampleDiv.style.zoom=’100%'”>Zoom 100%</button>
  9. </body>
  10. </html>
Nathan Pakovskie is an esteemed senior developer and educator in the tech community, best known for his contributions to Geekpedia.com. With a passion for coding and a knack for simplifying complex tech concepts, Nathan has authored several popular tutorials on C# programming, ranging from basic operations to advanced coding techniques. His articles, often characterized by clarity and precision, serve as invaluable resources for both novice and experienced programmers. Beyond his technical expertise, Nathan is an advocate for continuous learning and enjoys exploring emerging technologies in AI and software development. When he’s not coding or writing, Nathan engages in mentoring upcoming developers, emphasizing the importance of both technical skills and creative problem-solving in the ever-evolving world of technology. Specialties: C# Programming, Technical Writing, Software Development, AI Technologies, Educational Outreach

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top