আজ আমি একটি সিএসএস নিয়ে আলোচনা করব এবং এর কোডিং আপনাদের সাথে শেয়ার করব।আপনার সাইটের ছবিতে দিন Zoom হোভার ইফেক্ট নিয়ে নিন কোড গুলো. তো শুরু ক...
আজ আমি একটি সিএসএস নিয়ে আলোচনা করব এবং এর কোডিং আপনাদের সাথে শেয়ার করব।আপনার সাইটের ছবিতে দিন 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> 
COMMENTS