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
Пікірлер: 179
The way you teach is awesome!! Thank you for this amazing tutorial:)
you always explain better and easy to understand. thank you
Tquu soo much sir... This is video which im searching since a month... Tquu sir
Thanks you sir from my ♥. Your explanation is really amazing.
happy to see you back...
Really helpful Explained really well every bit.
this was awesome!!!
JazakAllah sir..
Explained amazingly
oh my god... how good you are!!just wow
@badshazulfiker3866
5 жыл бұрын
plz background song name?
thank you ..... sir
Sir ,Your teaching style is amazing , You explain in an easy way that helps me to learn CSS !!
@YahooBaba
4 жыл бұрын
Glad to hear that
#awesome #kamal #1 number ####Gagab ##aage katham ho gaya
@YahooBaba
4 жыл бұрын
Thanks dear :)
Thank You Sir
thank you sir
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!
Thankyou sir.
thank u... this really needs!! so helped me to make this amazing one at my own understandings now, so simple way🖐
@YahooBaba
3 жыл бұрын
Glad it helped!
boss U r awsm... plz make PHP series....Thanx!
Very interesting
Thank you sir 😊
Very nice bro ❤️ ❤️
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
3 жыл бұрын
Happy to help
Excellent Video on "CSS:hover" Effect...👌🔥👍 Thanku, So Much "Guru Ji" for providing "QUALITY CONTENT" free of COST...🤗
@YahooBaba
Жыл бұрын
Your most welcome :)
Sir.. U are awesome Hat's of to your work, teaching style and creativity..
@YahooBaba
3 жыл бұрын
Thanks a lot
i like it
Amazing.. Thank you sir 🤝 💐 be continue
@YahooBaba
3 жыл бұрын
Your Welcome :)
Very Easy Explanation 👌 Thank-you very much sir.
@YahooBaba
2 жыл бұрын
Most welcome
Thanks
Love your content...good luck for your future❤
@YahooBaba
5 жыл бұрын
Thanks Dear :)
thanks bro very helpful video and also your channel is very helpful to all web develpor and web designer
@YahooBaba
4 жыл бұрын
Thanks Danish :)
super vai
I just joined your channel and do you know i have only one word for your video . AWESOME
@YahooBaba
5 жыл бұрын
Thanks Nitin.
amazing
awesome
Hats off
Thank u so much sir u explain in a very easy way Allah apko bohat ajr dy ameen
@YahooBaba
3 жыл бұрын
Thanks and welcome
Nyc videos bro...keep it up the good work.👌👌
@YahooBaba
5 жыл бұрын
Thanks Ameet :)
no words.keep going👌🏻👌🏻👌🏻👌🏻
@YahooBaba
5 жыл бұрын
Thanks Dear :)
Best
Bhai Kamaal Kar Diya :)
@YahooBaba
5 жыл бұрын
Thanks Abdul :)
Outstanding.. Sir.. It's helpful video for me
@YahooBaba
3 жыл бұрын
Glad to hear that
bhai app zehar hooo
Bhai Super great Thank You
@YahooBaba
4 жыл бұрын
Thanks
Osm.... Aap jaisa koi nhi sikhata hai bahut simple method se samjha dete hai
@YahooBaba
4 жыл бұрын
Thanks Sushil :)
@SushilKumar-ic1kv
4 жыл бұрын
Sir aap animations pe vedio banaeye mujhe sikhana hai..
thank u brother
@YahooBaba
3 жыл бұрын
You're welcome!
Good
amazing...You are so good teacher.
@YahooBaba
3 жыл бұрын
Glad you think so!... Thanks :)
Thanks man you are great
@YahooBaba
4 жыл бұрын
You're welcome!
osm man
@YahooBaba
5 жыл бұрын
Thanks Moyo :)
Nice and simple explanation. Keep it up sir.
@YahooBaba
2 жыл бұрын
Thank you, I will
your awesome good lecuture
@YahooBaba
5 жыл бұрын
Thanks Babar :)
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
3 жыл бұрын
Yes sure soon I will start Javascript Example series
@md.sobhanhossainsourov619
3 жыл бұрын
@@YahooBaba thank u bro please give it early we are waiting for it....
thank you
@YahooBaba
4 жыл бұрын
Welcome!
love you from bangladesh
@YahooBaba
4 жыл бұрын
Thanks :)
❤❤❤❤
Owo Love from india
@YahooBaba
3 жыл бұрын
Thanks :)
Sir you deserve millions billions subscribers❤❤
@YahooBaba
3 жыл бұрын
Thanks :)
Super video
@YahooBaba
4 жыл бұрын
Thanks
Amazing tutorials all doubts are cleared . plz make more hover tutorial using after and before
@YahooBaba
5 жыл бұрын
Thanks Pranay ...very soon i am going to upload 50+ hover effect tutorials.. keep watching
@Coding_Asmr_PraDev
5 жыл бұрын
@@YahooBaba I always appreciate ur work sir thans for reply. No one on KZread explains like u KEEP GROWING, MAY GOD FULFILL UR ALL WISHES SOON.
@YahooBaba
5 жыл бұрын
Thanks Pranay for gr8 comment. :)
@nKGamingofficials
5 жыл бұрын
@@YahooBaba html or css k code bhi upload krdia kryn sir plz ya sab ko rar mein add kr k link attached krdia kryn
Nice
@YahooBaba
3 жыл бұрын
Thanks
can someone explain what is the use of overflow hidden in image overlay hover effect?
sir ye jo main div box hai or image hai .... isme halka sa gap hai use kaise hatayenge
In which playlist you add this video
@YahooBaba
5 жыл бұрын
Here is playlist link : kzread.info/head/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d
can this effect be made for a page having image gallery so that every image has this effect?
@YahooBaba
7 ай бұрын
Yes place the same class on every image where u want to apply this effect.
plz background song name?
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
4 жыл бұрын
Sahil main image ko pehle Photoshop ke andar cut karta hun 500x500px mein.
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
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.
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
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
3 жыл бұрын
use display:block; on img tag.
@muhammadgulzaib7567
3 жыл бұрын
@@YahooBaba I will try it thank u very much sir
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
5 жыл бұрын
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
5 жыл бұрын
@@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
5 жыл бұрын
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
5 жыл бұрын
@@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
5 жыл бұрын
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.
Sir yeh koun sa text editor hai
@YahooBaba
2 жыл бұрын
ATOM editor
bro trasnperaent may gradient colr mil skta?
@YahooBaba
2 жыл бұрын
Yes mil sakta hai. Uske liye aapko CSS mein (rgba) color mode use karna padega.
@smartlistener7046
2 жыл бұрын
@@YahooBaba ok thank you so much ❣️
Sir aise hee same 3 different image dalna ho toh or aaju baju mein ??
@YahooBaba
2 жыл бұрын
Uske liye isi code ko copy kar ke 3 to 4 time paste kardo aur image tag ka source change kar do.
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
4 жыл бұрын
Parent div ko float left kardo.
@deepone7242
4 жыл бұрын
@@YahooBaba thank you sir 😊
Sir how to make animated border of image
@YahooBaba
3 жыл бұрын
See this video : kzread.info/dash/bejne/dIB30Lyfn6q9orw.html
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
2 жыл бұрын
See this video on Position : kzread.info/dash/bejne/mYN806mNYrW7pJM.html
@rakeshkumaryadav1117
2 жыл бұрын
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
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
3 жыл бұрын
Aisa nahi ho sakta.... aap yeh code humari website se download kar ke apne code mein error dekhiye.
@amandeepbadgujjar7096
3 жыл бұрын
@@YahooBaba ok sir me try karta hu thanks sir 😇🙏
@amandeepbadgujjar7096
3 жыл бұрын
@@YahooBaba sir mera position kam kar rahe hai properly bina kisi dikkat k or mujhe meri problem bhi samajh agi h thank you sir😇🙏
sir how to download your complete course at one time
@hslifelinedubaivlogs
3 жыл бұрын
Ap course ko save kro or phir downloading py lga 2
Sir ye ek sath do screen me kese kam hota he.?
@YahooBaba
2 жыл бұрын
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.
jase animation ke uper. or transfome ke uper. transition ke uper
Sir hover effect ka definition btaye na please
I tried in the right way but did't able to set how to use hover. Thank-you sir.
@YahooBaba
4 жыл бұрын
Paste your code here
@achyutpal3865
4 жыл бұрын
@@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. :-)
sir please help me mera code nahe chal raha hah same to same kia hah blkul
@YahooBaba
4 жыл бұрын
Paste ur code here. Tabhi mein dekh kar bata sakta hun ki code mein kya problem hai.
@saroshahmed7097
4 жыл бұрын
@@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
4 жыл бұрын
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
4 жыл бұрын
@@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
sir ..... mri pic left pr nai ja rhi .. bataye ga
@YahooBaba
4 жыл бұрын
Ali bina dekhe toh mein kuch nahi bata sakta ... aap apna code ya toh yha paste kijiye ya phir mujhe email kijiye hello@yahoobaba.net par.
@MuhammadAli-ol1le
4 жыл бұрын
@@YahooBaba oky bhai
Can i get this code?
@abuzarkhan527
3 жыл бұрын
Read the comment of sarosh ahmed just 2 comments above ur comments u will get the code insha Allah
Bhai Css Animation , Css flex and many more Bhai ye kitne tarah kehote hai Very confused Please Reply🙏
@YahooBaba
4 жыл бұрын
Yeh sab to CSS ki properties hai...... aap idhar se playlist check kar sakte hai : kzread.info/head/PL0b6OzIxLPbzDsI5YXUa01QzxOWyqmrWw
@coolmindinvestmentcmi5004
4 жыл бұрын
@@YahooBaba Thanks Bro
how to get source code please?
@YahooBaba
11 ай бұрын
From here you can get all source code : www.yahoobaba.net/codelab
sir plz provide the source code
Position m 1 problem aa rahi hai.
@abhayprataprana8173
5 жыл бұрын
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
5 жыл бұрын
*{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.
@filmyworld5741
5 жыл бұрын
@@abhayprataprana8173 😂😂
@abhayprataprana8173
5 жыл бұрын
@@filmyworld5741 hs kio raha h bhai
@filmyworld5741
5 жыл бұрын
@@abhayprataprana8173 bhai apne puri coding hi dal di
Thanks sir 🥰
@YahooBaba
3 жыл бұрын
Your welcome :)