কম্পিউটার

কিভাবে 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>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে হোভারে একটি উপাদান জুম/স্কেল করবেন?

হলুদ বৃত্তের উপর ঘোরাফেরা করার সময় −

কিভাবে CSS দিয়ে হোভারে একটি উপাদান জুম/স্কেল করবেন?


  1. কিভাবে CSS দিয়ে হোভারে একটি উপাদান জুম/স্কেল করবেন?

  2. কিভাবে CSS দিয়ে একটি উপাদানের অনুপাত বজায় রাখা যায়?

  3. কিভাবে CSS দিয়ে হোভারে ট্রানজিশন যোগ করবেন?

  4. কিভাবে CSS দিয়ে একটি বৃত্তাকার পাথে একটি উপাদান সরানো যায়?