হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।

তো টাইটেল দেখেই বুঝে গেছেন কিসের কথা বলছি। তো গত পোস্টে আমরা দেখেছিলাম একটি এনিমেটেড সোশ্যাল বাটন কীভাবে ডিজাইন করবো। আজ আমরা দেখবো কীভাবে একটি ইমেজ কে হোভার করলে কীভাবে লেফট সাইড থেকে পিক এর ডিটেইলস অথবা টেক্সট শো করাবেন। তাহলে চলেন শুরু করি।

তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু 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:

Image

Subscribe

 

তো যাবার আগে শেষ কথা। আপনারা যারা আগের ভিডিও গুলো দেখেননি এখান থেকে দেখে নিবেন।

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

আর ভালো লাগলে আমার চ্যানেল টি সাবস্ক্রাইব করুনঃ

Pogamar – The Tech Therapist

ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন

Note: আপনারা কী ফুল ডেভলপার/প্রোগ্রামার দের মতো সার্ভার এবং ডেভলপার অথবা প্রোগ্রামার দের মতো কোডিং এনভায়রনমেন্ট বানানোর টিউটোরিয়াল চাই? চাইলে নিচে কমেন্ট করুন।

ফেসবুকে আমি:-Inad Islam
আমার ইউটিউব চ্যানেলঃ- POGAMAR

7 thoughts on "কীভাবে ডিজাইন করবেন ইমেজ হোভার ইফেক্ট শুধুমাত্র এইচটিএমএল এবং সিএসএস এর মাধ্যমে"

  1. Roni Roni Contributor says:
    Nc


    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      Dhonnobad vai!!
  2. Roni Roni Contributor says:
    Wlc
    amr page
    valo lagle 1 ta like diben
    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      amito facebook calaina vai shudhu messenger taai sorry!!
  3. Roni Roni Contributor says:
    No sry….its okk
  4. Ar Parvez Ar Parvez Author says:
    আচ্ছা ভাইয়া আমাকে একটা কোড দিতে পারবেন? যে কোড টা দিয়েছেন সেইরকমইই। তবে আমি যেটা চাচ্ছিলাম সেটা হল একটা ইমেজ এর সাথে বর্ডার থাকবে এবং নিচে সেই ইমেজ সম্পর্কে লিখা যাবে। কোডে জাস্ট ইমেজ সোর্স আর টেক্সট লিখতে হবে। আমি একটা বানিয়ে ছিলাম। কিনন্তু পছন্দ হয়নি
    1. Pogamar - The Tech Therapist Pogamar - The Tech Therapist Author Post Creator says:
      Apnarta kothaw upload diye othoba amake fb te design er ss ta diyen ami baniye dibo inshallah !! otherwise thank you for your Comment

Leave a Reply