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; } <div class="grow pic"> <img src="https://lorempixel.com/400/400/people/9" alt="portrait"> </div>
তো শুরু করা যাক ,
প্রথমত আমরা বেসিক ভাবে ইমেজ হোবার তৈরী করে থাকি ।
মুলত হোবার টা কি ?
হোবার এফেক্ট হচ্ছে যখন আপনি কোন লিংক বা ছবির উপর ক্লিক করবেন তখন তার মাঝে একটা পরিবর্তন লক্ষ্য করা যায় আর এই পরিবর্তনটাই হচ্ছে হোবার এফেক্ট।
যাই হোক আজ এমন একটি সিএসএস আপনাদের মাঝে শেয়ার করব যা দিয়ে আপনি আপনার সাইটের ছবির Zoom Effect তৈরী করতে পারবেন ।
তো শুরু করা যাকঃ
প্রথমতঃ-
নিচের কোডটি আপনি আপনার সাইটের </body> ট্যাগ খুজে বের করে </body> ট্যাগটির উপরে পেস্ট করবেন।
PHP:
.grow img {
আর নিচের কোডটি ব্যবহার করুন আপনার Html কোডের ভিতরে যেখানে আপনি ছবি দেখাতে চান সেখানে শুধু ছবির লিংকটি পাল্টে দিবেন আর দেখুন মজা।
PHP:
আজকের মত বিদায় । আবার দেখা হবে নতুন কিছু নিয়ে নতু কোন দিন।
সৌজন্যেঃ সাইবার প্রিন্স
Share:
7 thoughts on "আপনার সাইটের ছবিতে দিন Zoom হোভার ইফেক্ট নিয়ে নিন কোড গুলো"