CSS Image Hover Effect with Sliding Caption (Hindi/Urdu)

In this tutorial you will learn css image hover effect with animated overlay sliding caption with HTML and CSS.This animated image hover effect is in Pure CSS.
CSS Postion Tutorial
• CSS Position Tutorial ...
CSS Box-Sizing Tutorial
• CSS Box-Sizing Tutoria...
Follow us on Facebook
/ yahooobaba
Follow us on Twitter
/ yahooobaba
#css #css3 #html #webdesign

[@ashutosh_code]

you are really a good teacher....i paid a teacher but he don't teach me.like that even skip this topic too😑...but you teach very well❤️....now presently i am a full stack developer😀..

[@YahooBaba]

Happy to help

[@abduljalil4528]

oh my god... how good you are!!just wow

[@badshazulfiker3866]

plz background song name?

[@soumyaranjanpradhan1325]

Sir ,Your teaching style is amazing , You explain in an easy way that helps me to learn CSS !!

[@YahooBaba]

Glad to hear that

[@SushilKumar-ic1kv]

Osm.... Aap jaisa koi nhi sikhata hai bahut simple method se samjha dete hai

[@YahooBaba]

Thanks Sushil :)

[@SushilKumar-ic1kv]

Sir aap animations pe vedio banaeye mujhe sikhana hai..

[@mayank2535]

Thanks a lot man, i watched 2 tutorials of some other educator but wasnt able to get an idea of how to approach, but after watching your video i got it clear...... thanks a lot

[@YahooBaba]

You're welcome!

[@abdulsammad652]

Sir you deserve millions billions subscribers❤❤

[@YahooBaba]

Thanks :)

[@ashishsingh7056]

#awesome #kamal #1 number ####Gagab ##aage katham ho gaya

[@YahooBaba]

Thanks dear :)

[@nkjaipurmovies5162]

I just joined your channel and do you know i have only one word for your video . AWESOME

[@YahooBaba]

Thanks Nitin.

[@JahangirKhan-dc3mm]

happy to see you back...

[@mr.hacker....6266]

Excellent Video on "CSS:hover" Effect...👌🔥👍
Thanku, So Much "Guru Ji" for providing "QUALITY CONTENT" free of COST...🤗

[@YahooBaba]

Your most welcome :)

[@vikasni95]

Tquu soo much sir... This is video which im searching since a month... Tquu sir

[@md.sobhanhossainsourov619]

thank u bro.u are awesome.I am from Bangladesh.i have complete your html,css and javascript tuitorial.Now i can make design using html and css.i also finished javascript tuitorial but i don't use it in website. please give some " javascript example" tuitorial..it helps everyone to use javascript in website...

[@YahooBaba]

Yes sure soon I will start Javascript Example series

[@md.sobhanhossainsourov619]

@@YahooBaba thank u bro please give it early we are waiting for it....

[@vidhi_bhatt]

The way you teach is awesome!! Thank you for this amazing tutorial:)

[@chintanpatel5087]

Explained amazingly

[@coolmindinvestmentcmi5004]

Bhai Super great Thank You

[@YahooBaba]

Thanks

[@hslifelinedubaivlogs]

Thank u so much sir u explain in a very easy way
Allah apko bohat ajr dy ameen

[@YahooBaba]

Thanks and welcome

[@abdulmoeez13]

Bhai Kamaal Kar Diya :)

[@YahooBaba]

Thanks Abdul :)

[@sokherdesh4693]

Outstanding.. Sir.. It's helpful video for me

[@YahooBaba]

Glad to hear that

[@danishrizwaan1256]

thanks bro very helpful video and also your channel is very helpful to all web develpor and web designer

[@YahooBaba]

Thanks Danish :)

[@shabbirhusain6634]

no words.keep going👌🏻👌🏻👌🏻👌🏻

[@YahooBaba]

Thanks Dear :)

[@Burn_Deep0511]

Sir.. U are awesome
Hat's of to your work, teaching style and creativity..

[@YahooBaba]

Thanks a lot

[@shihabkhan3186]

boss U r awsm... plz make PHP series....Thanx!

[@preethandal6136]

plx pta nhi ki mera yeh comment ap tak aaa rha h ya nhi
par me aapse request krta hu .. ap bhut acha pdate ho
or plz as a tutorial list ke sath banaya kro

[@prinkadevi6127]

thank you
..... sir

[@niazmakhdum3562]

you always explain better and easy to understand. thank you

[@AhsanHabib-vt2dq]

amazing...You are so good teacher.

[@YahooBaba]

Glad you think so!... Thanks :)

[@dhruvgautam2043]

Amazing.. Thank you sir 🤝 💐 be continue

[@YahooBaba]

Your Welcome :)

[@saimasaima6944]

Very interesting

[@Coding_Asmr_PraDev]

Amazing tutorials all doubts are cleared . plz make more hover tutorial using after and before

[@YahooBaba]

Thanks Pranay ...very soon i am going to upload 50+ hover effect tutorials.. keep watching

[@Coding_Asmr_PraDev]

@@YahooBaba I always appreciate ur work sir thans for reply. No one on RUclips explains like u KEEP GROWING, MAY GOD FULFILL UR ALL WISHES SOON.

[@YahooBaba]

Thanks Pranay for gr8 comment. :)

[@nKGamingofficials]

@@YahooBaba html or css k code bhi upload krdia kryn sir plz ya sab ko rar mein add kr k link attached krdia kryn

[@AmitKumar-fb6yt]

Nyc videos bro...keep it up the good work.👌👌

[@YahooBaba]

Thanks Ameet :)

[@ADARSHKUMAR-me4zn]

Nice and simple explanation. Keep it up sir.

[@YahooBaba]

Thank you, I will

[@abdeali1301]

Very Easy Explanation 👌 Thank-you very much sir.

[@YahooBaba]

Most welcome

[@naitikkathiriya]

thank u... this really needs!! so helped me to make this amazing one at my own understandings now, so simple way🖐

[@YahooBaba]

Glad it helped!

[@suryashrastogi4997]

this was awesome!!!

[@ashishsingh7056]

bhai app zehar hooo

[@Ramandeep-hh7sy]

Thanks you sir from my ♥. Your explanation is really amazing.

[@ITnectar]

Really helpful
Explained really well every bit.

[@kishorisahoo6088]

Thank you sir 😊

[@peacetvbangladesh6558]

love you from bangladesh

[@YahooBaba]

Thanks :)

[@HollywoodnowHindi]

Owo Love from india

[@YahooBaba]

Thanks :)

[@imjhassan2822]

Very nice bro ❤️ ❤️

[@mdhasiburrahmannafiz9984]

awesome

[@developerhackney4938]

osm man

[@YahooBaba]

Thanks Moyo :)

[@anwaraanu531]

super vai

[@onlineteachingwithsahil5929]

Sir thank you so much....sir apka explain Karne ka tarika bohat accha hai..lekin image size par ek viedo make karenge to bohat accha hoga ..apka image size perfect aa jata Hain lekin Mera image bohat bada aa te Hain...image width height Kya lete hai o aap bol deyo to bohat accha hoga..or image description par hoga to bohat help hoga sir...

[@YahooBaba]

Sahil main image ko pehle Photoshop ke andar cut karta hun 500x500px mein.

[@wardamalik5972]

JazakAllah sir..

[@vishnugurjar983]

Super video

[@YahooBaba]

Thanks

[@informationtoallj]

Thanks man you are great

[@YahooBaba]

You're welcome!

[@JustForProgrammers]

Best

[@muhammadafzal237]

Good

[@bijoymohonto9185]

Love your content...good luck for your future❤

[@YahooBaba]

Thanks Dear :)

[@afriulkaium6236]

amazing

[@technologyall7923]

Thankyou sir.

[@BabarAli-um6eq]

your awesome good lecuture

[@YahooBaba]

Thanks Babar :)

[@dhakarpech5273]

Nice

[@YahooBaba]

Thanks

[@vipchhora7351]

Thanks sir 🥰

[@YahooBaba]

Your welcome :)

[@mr.brutal6644]

thank you🙄

[@mdhasiburrahmannafiz9984]

Hats off

[@punjabimedia7734]

thank u brother

[@YahooBaba]

You're welcome!

[@gurejalectures]

In which playlist you add this video

[@YahooBaba]

Here is playlist link : ruclips.net/p/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

[@ayushpratap4747]

Thanks

[@dibakarrajak7187]

i like it

[@sgouri3519]

thank you lot
sir if i got job as a web deve so how i will show to company my certficate or diploma ? because i learning from u online

[@YahooBaba]

Hello, If you are planning for a job of Web Designer than nobody ask for certificates of diploma in that. You have to show some of your work. So practice to make a good templates and show at the time of Job Interview as a Fresher.

[@yashaban8069]

@@YahooBaba thanks for reply sir.
One employer asked me that from which institute u did web course.
I said from u tube chanel yahobaba.
They said sorry u dont have any good certificate or diploma from recognized institute .
Than i return .
I m in dubai.

[@YahooBaba]

Ohhh k, Actually in India or Pakistan their is not much need of Certification for Web Design but ok try another company and if u face this same problem of certificate then i will suggest u please join any good institute.

[@yashaban8069]

@@YahooBaba sir actually here no time to join institute that why i m learning from your chanel.
I m working in a company in admin department.
Too much confusion
To join institute i have to left job

[@YahooBaba]

Join the insititute or coaching center who will teach u for 1 or 2 hours only that will help u to earn side by side.

[@greatart1144]

thank you

[@YahooBaba]

Welcome!

[@SyedaMuneezah]

can someone explain what is the use of overflow hidden in image overlay hover effect？

[@akkashmir4015]

Yahoo baba kindly give me a suggestion for my job project.I am a new in this field.But i can create website.which project is best for my first job.

[@YahooBaba]

Try to make some 3 to 4 projects and show them at your interview time. Also mention that projects on our resume.

[@jagpalsingh9134]

hello respected sir thx so much sir jo ap code mention kar rhe ho bo hum edit kare paye means copy uske liye option rakh do plz thx again

[@YahooBaba]

Already rakha hua hai :
www.yahoobaba.net/codelab

[@sallu21m]

can this effect be made for a page having image gallery so that every image has this effect?

[@YahooBaba]

Yes place the same class on every image where u want to apply this effect.

[@preethandal6136]

jase animation ke uper. or transfome ke uper. transition ke uper

[@pradeepkumarmaurya7488]

❤❤❤❤

[@InterestsUnbound]

Sir aise hee same 3 different image dalna ho toh or aaju baju mein ??

[@YahooBaba]

Uske liye isi code ko copy kar ke 3 to 4 time paste kardo aur image tag ka source change kar do.

[@muhammadgulzaib7567]

Sir I have a Question, 3:09 image ne div k according full height nhi li or ye end tk aese hi rhi, but jo content wala div tha us ne div k according full height le li thi, ye image ne full height ku nhi li?

[@YahooBaba]

use display:block; on img tag.

[@muhammadgulzaib7567]

@@YahooBaba I will try it thank u very much sir

[@surajaswaldev7485]

sir ye jo main div box hai or image hai .... isme halka sa gap hai use kaise hatayenge

[@achyutpal3865]

I tried in the right way but did't able to set how to use hover.
Thank-you sir.

[@YahooBaba]

Paste your code here

[@achyutpal3865]

@@YahooBaba No sir all good.
After watching transition tutorial in the CSS playlist, where you have shown an image transition as an example, after watching that I tried my self and what I face that time I mentioned here in the above comment.
Now I understand very well.
I started learning from your CSS playlist, but I did not completed due to some reasons.
This time I will complete all the CSS Playlist.
Thank-You Very much Sir.
:-)

[@deepone7242]

Hello sir , ye hover video apki bahut hi achi h meko sb samjh aaya par ek question tha ,
Jb m ye hi property bahut sare pics par apply karti ho tu bo sari picture niche aa jati , mujhe side by side chahiye ye kaise karo

[@YahooBaba]

Parent div ko float left kardo.

[@deepone7242]

@@YahooBaba thank you sir 😊

[@rakeshkumaryadav1117]

Sir
When you write position:relative in box class
Why content fits in box border
My means
Relative means it takes position relative to parent class or deviate from its normal position
Here content is itself a child of box how this happen

[@YahooBaba]

See this video on Position :
ruclips.net/video/gOHqGT2RUt0/видео.html

[@rakeshkumaryadav1117]

Thanks for the reply
You are really doing great job for us
Thanks for that
With good content and explanation
Replying each query is really great job
Who is reading this comment
Just go through the playlist you will get each minute concept
And also don't forget to share

[@coolmindinvestmentcmi5004]

Bhai Css Animation , Css flex and many more Bhai ye kitne tarah kehote hai Very confused
Please Reply🙏

[@YahooBaba]

Yeh sab to CSS ki properties hai...... aap idhar se playlist check kar sakte hai : ruclips.net/p/PL0b6OzIxLPbzDsI5YXUa01QzxOWyqmrWw

[@coolmindinvestmentcmi5004]

@@YahooBaba Thanks Bro

[@GamingCinema-vw1to]

Sir yeh koun sa text editor hai

[@YahooBaba]

ATOM editor

[@RabiaKhan-pm7ts]

4:51 but how? can someone explain? couldnt we just give the content a position of relative? pls help

[@badshazulfiker3866]

plz background song name?

[@SanjayGupta-uu7zp]

Sir hover effect ka definition btaye na please

[@smartlistener7046]

bro trasnperaent may gradient colr mil skta?

[@YahooBaba]

Yes mil sakta hai. Uske liye aapko CSS mein (rgba) color mode use karna padega.

[@smartlistener7046]

@@YahooBaba ok thank you so much ❣️

[@cciecloud]

Sir how to make animated border of image

[@YahooBaba]

See this video : ruclips.net/video/BLCnZfoGWrY/видео.html

[@chintanpatel5087]

Sir ye ek sath do screen me kese kam hota he.?

[@YahooBaba]

Agar computer se do screen mein work karna hai toh graphics card lagana padta hai aur agar laptop ke sath karna hai toh laptop mein VGA ya HDMI port honi chahiye.

[@mukhlisurrehman8279]

sir how to download your complete course at one time

[@hslifelinedubaivlogs]

Ap course ko save kro or phir downloading py lga 2

[@amandeepbadgujjar7096]

Hii sir mera parent class ka relative work nhi kar raha h or absolute screen ke according work kar raha hai, iska koi solution h kya?

[@YahooBaba]

Aisa nahi ho sakta.... aap yeh code humari website se download kar ke apne code mein error dekhiye.

[@amandeepbadgujjar7096]

@@YahooBaba ok sir me try karta hu thanks sir 😇🙏

[@amandeepbadgujjar7096]

@@YahooBaba sir mera position kam kar rahe hai properly bina kisi dikkat k or mujhe meri problem bhi samajh agi h thank you sir😇🙏

[@MuhammadAli-ol1le]

sir ..... mri pic left pr nai ja rhi .. bataye ga

[@YahooBaba]

Ali bina dekhe toh mein kuch nahi bata sakta ... aap apna code ya toh yha paste kijiye ya phir mujhe email kijiye [e-mail] par.

[@MuhammadAli-ol1le]

@@YahooBaba oky bhai

[@danianiazi8229]

Can i get this code?

[@abuzarkhan527]

Read the comment of sarosh ahmed just 2 comments above ur comments u will get the code insha Allah

[@saroshahmed7097]

sir please help me mera code nahe chal raha hah same to same kia hah blkul

[@YahooBaba]

Paste ur code here. Tabhi mein dekh kar bata sakta hun ki code mein kya problem hai.

[@saroshahmed7097]

@@YahooBaba
hover
.box{
border:2px solid blue;
width: 400px;
position:relative;
overflow:hidden;
margin:10px auto;
}
.box img{
width:100%;
height:auto;
}
.content{
colour:#fff;
background:rgba(0,0,0,0.8);
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
padding:20px;
box-sizing:border-box;
transition:all 0.5s;
}
.box:hover.content{
left:0;
}
.content p{
border-top:1px solid white;
border-bottom:1px solid white;
padding:20px 0;
}
MEHRAN
This is mehran car

[@YahooBaba]

Aapki iss line mein galti hai :
.box:hover.content{
left:0;
}
aapne hover ke baad space nahi diya hai ....correct code ye hai :
.box:hover .content{
left:0;
}

[@saroshahmed7097]

@@YahooBaba thank you sir I learned alot from your tutorials agar aik page page 4 se 6 images par hover lagana ho to kya karna hoga any hint

[@abhayprataprana8173]

Position m 1 problem aa rahi hai.

[@abhayprataprana8173]

Agar Navbar ko position-fixed dete h or dosri kisi div ke ko postion-relative dekar , scroll up karte h toh h1, navbar ke uper chala jata h. uske piche nahi jata.

[@abhayprataprana8173]

*{margin:0; padding:0;}
#main-div{width: 100%;
height: 100%;
background: red;
}
#navbar{background: black;
color: #fff;
height: 50px;
position: fixed;
font-size:18px;
width: 100%}
.div{color: yellow;
height: 500px;
width: 100%;
font-size: 30px;
text-align: center;
position: relative;
top: 250px;}



Logo, menubar, search-box etc.
HelloLorem ipsum dolor sit amet, consectetur adipisicing elit. Libero fuga facilis vel consectetur quos sapiente




copy kar ke scroll karo. Text navbar ke upper chala jata hai.

[@Gaming_3690]

@@abhayprataprana8173 😂😂

[@abhayprataprana8173]

@@Gaming_3690 hs kio raha h bhai

[@Gaming_3690]

@@abhayprataprana8173 bhai apne puri coding hi dal di

[@ferkare-gshte]

how to get source code please?

[@YahooBaba]

From here you can get all source code : www.yahoobaba.net/codelab

[@lovepreet3223]

sir plz provide the source code

[@iamdanyaal]

Thank You Sir

[@RajendrasinhSolanki-d1n]

thank you sir