হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।
তো টাইটেল দেখেই বুঝে গেছেন কিসের কথা বলছি। তো গত পোস্টে আমরা দেখেছিলাম একটি এনিমেটেড সোশ্যাল বাটন কীভাবে ডিজাইন করবো। আজ আমরা দেখবো কীভাবে একটি ইমেজ কে হোভার করলে কীভাবে লেফট সাইড থেকে পিক এর ডিটেইলস অথবা টেক্সট শো করাবেন। তাহলে চলেন শুরু করি।
তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু Index.html এ রাখবেনঃ-
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Left Hover Effect - Pogamar | The Tech Therapist</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTYsGMVf387ASO04q5vlN2Gbox3-r8e0-8ChTnO-6JonE5WwWoL" alt="Image" class="image"> <div class="effect-overlay"> <div class="effect-text"> Subscribe </div> </div> </div> </body> </html>
রেখে সেইভ দিন। এবং নিম্মের কোড টুকু রাখবেন style.css এঃ-
Example
/*
*
* Hover Over the image from left Effect
* A pure original Content by POGAMAR
* The Tech Therapist
*
*/
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.main {
width: 340px;
margin: 100px auto;
position: relative;
}
.main img {
display: block;
width: 340px;
margin: 0 auto;
}
.effect-overlay {
position: absolute;
bottom: 0;
left: 0;
right:0;
background: #e43;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.main:hover .effect-overlay {
width: 100%;
}
.effect-text {
color: #fff;
text-align: center;
padding: 5px 16px;
border: 1px solid #fff;
font-size: 20px;
font-weight: bolder;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
এবার কোড টা এক্সিকিউট করুন। আর যারা কোড রান করাতে পারেন্না (আশা করি সবাই পারেন) তাদের বলবো ট্রিকবিডিতে অনেক পোস্ট আছে ওয়েব সার্ভার সেট আপ দেয়ার যেকোন একটা দেখে নিলেই হবে। আর না পারলে নিচে কমেন্ট করুন আমি টিউটোরিয়ালের মাধ্যমে শিখিয়ে দিবো। আর যাদের কাছে কঠিন লাগে তারা ক্রোম ওপেন করেও রান করাতে পারেন যেটা আমি প্রায় সব পর্বেই দেখিয়েছিলাম। যারা দেখেননি তাদের জন্যে আজ আবার দেখিয়ে দেয়া হলো-
files://sdcard/folder_name
অর্থাৎ আপনার ফোল্ডার এর নাম যদি হয় animated_Image_Effect তাহলে আপনাকে ইউয়ারএল বক্স এ লিখতে হবেঃ-
files://sdcard/animated_Image_Effect/index.html
তারপর দেখুন আপনার কোড এক্সিকিউট হচ্ছে। এবার আপনার যেমন ভালো লাগে তেমন মডিফাই করে নিন। দরকার হলে কালার চেঞ্জ করে নিন। সম্পুর্ন আপনার ইচ্ছে
Demo:
তো যাবার আগে শেষ কথা। আপনারা যারা আগের ভিডিও গুলো দেখেননি এখান থেকে দেখে নিবেন।
How to design a Post Card By html & css
How to make a Login Form By html & css
How to make a Centered Horizontal Nav Bar With logo by Html & css
How to make a Navbar By html & css
How to make a Registration Form By html & css
আর যাদের এই টিউটোরিয়াল টি বুঝতে অথবা কোড বুঝতে সমস্যা হচ্ছে তারা ভিডিও টি দেখুনঃ
আর যারা এখন ও এদিক ওদিক ঘুরতেসেন আর বলতেসেন ভাইয়া কাজ শিখান আর তারা আপনার কাছে টাকা দাবি করছে তাদের জন্যে আমি বলতে চাইবো যে আমার চ্যানেল এর পাশে থাকতে পারেন অন্তত আমি বেশি না পারি একটু হলেও শেখাতে পারবো ইনশাল্লাহ। আমার শুধু চাই আপনাদের সাহায্য আর সহযোগিতা।
আর প্রত্যেক টিউটোরিয়াল এ আমি বলি যে আপনারা যদি চান আমার এই দেয়া কোড গুলো আপনারা এই আপনাদের ওয়ার্ডপ্রেস অথবা আপনাদের ওয়েবসাইটে ইউজ করতে পারেন। তবে শুধু ক্লাস গুলো চেইঞ্জ করে নিলেই হবে। ক্লাস গুলো চেইঞ্জ করে নিবেন। অর্থাৎ আপনার থিম এর যেখানে যেখান্র বাটন আছে সেই বাটনের ক্লাস এর সাথে আমার দেয়া সিএসএস এর ক্লাস গুলো রিপ্লেস করে নিলেই হয়ে যাবে ইনশাল্লাহ। আর যদি না পারেন তবে নিচে কমেন্ট করবেন ইনশাল্লাহ আমি তা নিয়ে টিউটোরিয়াল বানিয়ে দিবো।
পোস্টের কমেন্টে বলুন আপনাদের প্রব্লেম এবং ভিডিও গুলোতে কি আমি প্রত্যেক লাইন কোড এক্সপ্লেইন করবো কিনা।
তো যাদের আমার টিউটোরিয়াল গুলো ভালো লাগছে তারা শেয়ার করে আমাকে সাহায্য করুন এবং ভিডিও ভালো লেগে থাকলে চ্যানেল সাবস্ক্রাইব করতে ভুলবেন্না।
আবার আসব আরেক টিউটোরিয়াল নিয়ে। ততদিন সুস্থ থাকুন। Pogamar এর সাথে থাকুন।
আর যাদের এই টিউটোরিয়াল এর কোড গুলো প্রয়োজন তারা এখান থেকে ডাউনলোড করে নিনঃ Download Codes
আর ভালো লাগলে আমার চ্যানেল টি সাবস্ক্রাইব করুনঃ
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন
Note: আপনারা কী ফুল ডেভলপার/প্রোগ্রামার দের মতো সার্ভার এবং ডেভলপার অথবা প্রোগ্রামার দের মতো কোডিং এনভায়রনমেন্ট বানানোর টিউটোরিয়াল চাই? চাইলে নিচে কমেন্ট করুন।