Weebly মধ্যে দৃষ্টিকোণ ইমেজ হোভার প্রভাব যোগ করুন

আপনি হয়তো আপনার Weebly সাইটে প্রচুর ছবি ব্যবহার করছেন কিন্তু ব্যবহারকারীদের কাছে তাদের আকর্ষণ করার জন্য শুধুমাত্র গুরুত্বপূর্ণ ছবিগুলি তুলে ধরতে চেয়েছিলেন। উদাহরণস্বরূপ, আপনি একটি শোকেস পোর্টফোলিও পৃষ্ঠা তৈরি করতে পারেন এবং প্রকল্প, ফটোগ্রাফি, ভিডিও ইত্যাদিতে আপনার কাজের ছবি প্রদর্শন করতে পারেন। এই নিবন্ধে আমরা দেখাব কিভাবে আপনার Weebly সাইটে ইমেজগুলিতে দৃষ্টিভঙ্গি হভারিং প্রভাব যোগ করতে হয়। নীচে হভারিং ইফেক্ট সহ চিত্রের একটি উদাহরণ এবং দৃষ্টিকোণ হভারিং প্রভাব দেখতে মাউসটিকে চিত্রের উপরে সরান।

কিভাবে একটি ছবিতে পার্সপেক্টিভ হোভারিং ইফেক্ট যুক্ত করবেন?

প্রক্রিয়াটি তিনটি সহজ ধাপ নিয়ে গঠিত:

• আপনার Weebly সাইটে ছবি আপলোড করা হচ্ছে
• CSS কোড যোগ করা হচ্ছে
• HTML কোড যোগ করা

ধাপ 1 – একটি ছবি আপলোড করা

আপনার Weebly অ্যাকাউন্টে লগইন করুন, আপনি যে সাইটটি সম্পাদনা করতে চান তা চয়ন করুন এবং “ডিজাইন> HTML / CSS সম্পাদনা করুন" এ নেভিগেট করুন। "সম্পদ" এর পাশে উপলব্ধ + বোতামে ক্লিক করুন এবং তারপরে "আপলোড ফাইল (গুলি)" বিকল্পটি নির্বাচন করুন। আপনি যে ছবিটি হোভার ইফেক্ট যোগ করতে চান তা আপলোড করুন। Weebly সাইটের CSS সম্পাদনার বিষয়ে আরও জানুন ।

Weebly সাইটে ফাইল আপলোড করা হচ্ছে

আপলোড করা ছবির ইউআরএল হতে হবে- ” http://yoursitename.weebly.com/files/theme/image-name.jpg “। ইউআরএলে আপনার সাথে সাইট এবং ছবির নাম প্রতিস্থাপন করুন।

পদক্ষেপ 2 – হোভার ইফেক্টের জন্য CSS কোড যোগ করা

"পৃষ্ঠাগুলি> পৃষ্ঠা নির্বাচন করুন> উন্নত সেটিংস> হেডার কোড" বিভাগে সিএসএস কোড যোগ করুন। ধাপ 1 থেকে আপনার নিজের ইমেজ ইউআরএল দিয়ে ইমেজ ইউআরএল প্রতিস্থাপন করুন।

<style type="text/css">
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
background: 
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
url("https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
.thumb a:after {
content: ''; position: absolute; left: 0; bottom: 0; 
width: 100%; height: 36px;
background: inherit; background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg); transform-origin: bottom;
}
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); 
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s; 
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
</style>

ধাপ 3 – HTML যোগ করা

চূড়ান্ত ধাপ হল একটি "এম্বেড কোড" এলিমেন্টের ভিতরের বিষয়বস্তুতে নিচের কোডটি যোগ করা।

<div class="thumb">
<a href="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg">
<span>KungFu Panda</span>
</a>
</div>

ছবিটি উইবলি এডিটরের মধ্যে দৃশ্যমান নাও হতে পারে, আপনার সাইটে প্রকাশ করুন এবং ইমেজটিতে মাউস ঘুরিয়ে দেখুন ছবিটিতে দৃষ্টিকোণ ইমেজ প্রভাব যোগ করা হয়েছে।

নীচের মত দৃষ্টিকোণ হভার প্রভাব সহ একটি ইমেজ শেয়ারিং উইজেট খুঁজছেন?

আরও পড়ুন…