হ্যালো বন্ধুরা আশা করি সবাই ভাল আছেন ,
আজ আমি একটি সিএসএস নিয়ে আলোচনা করব এবং এর কোডিং আপনাদের সাথে শেয়ার করব।আপনার সাইটের ছবিতে দিন Zoom হোভার ইফেক্ট নিয়ে নিন কোড গুলো.
তো শুরু করা যাক ,

প্রথমত আমরা বেসিক ভাবে ইমেজ হোবার তৈরী করে থাকি ।

মুলত হোবার টা কি ?

হোবার এফেক্ট হচ্ছে যখন আপনি কোন লিংক বা ছবির উপর ক্লিক করবেন তখন তার মাঝে একটা পরিবর্তন লক্ষ্য করা যায় আর এই পরিবর্তনটাই হচ্ছে হোবার এফেক্ট।


যাই হোক আজ এমন একটি সিএসএস আপনাদের মাঝে শেয়ার করব যা দিয়ে আপনি আপনার সাইটের ছবির Zoom Effect তৈরী করতে পারবেন ।

তো শুরু করা যাকঃ

প্রথমতঃ-
নিচের কোডটি আপনি আপনার সাইটের </body> ট্যাগ খুজে বের করে </body> ট্যাগটির উপরে পেস্ট করবেন।

PHP:

.grow img {

height: 300px;width: 300px;-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.grow img:hover {

width: 400px;

height: 400px;

}






আর নিচের কোডটি ব্যবহার করুন আপনার Html কোডের ভিতরে যেখানে আপনি ছবি দেখাতে চান সেখানে শুধু ছবির লিংকটি পাল্টে দিবেন আর দেখুন মজা।

PHP:

<div class="grow pic">

<img src="https://lorempixel.com/400/400/people/9" alt="portrait">

</div>




আজকের মত বিদায় । আবার দেখা হবে নতুন কিছু নিয়ে নতু কোন দিন।

সৌজন্যেঃ সাইবার প্রিন্স











7 thoughts on "আপনার সাইটের ছবিতে দিন Zoom হোভার ইফেক্ট নিয়ে নিন কোড গুলো"

    1. Cyber Prince Author Post Creator says:
      Thank You @ Aby Abdullah Riaz bro
  1. ryj.ahmed Contributor says:
    আগে থেকেই জানতাম তবুও সেয়ার করার জন্য ধন্যবাদ।
    1. Cyber Prince Author Post Creator says:
      Thanks
    1. Cyber Prince Author Post Creator says:
      Thanks a. Lot
  2. Junaid Author says:
    welcome.stay connect with trickbd.

Leave a Reply