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

Glad to hear that

plz background song name?

Thanks Sushil :)

Sir aap animations pe vedio banaeye mujhe sikhana hai..

Thanks

Thanks Danish :)

Thanks a lot

Glad it helped!

Thanks Abdul :)

Happy to help

Thanks :)

Here is playlist link : ru-vid.com/group/PL0b6OzIxLPbyq_At-YvkOo2E85-eZ_E1d

Yeh sab to CSS ki properties hai...... aap idhar se playlist check kar sakte hai : ru-vid.com/group/PL0b6OzIxLPbzDsI5YXUa01QzxOWyqmrWw

@@YahooBaba Thanks Bro

Thanks Nitin.

Yes sure soon I will start Javascript Example series

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

Thanks Dear :)

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

ATOM editor

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.

@@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.

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.

@@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

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.

use display:block; on img tag.

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

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

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

Thanks Ameet :)

See this video on Position : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gOHqGT2RUt0.html

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

Thanks Moyo :)

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

Thanks :)

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

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

Thanks Pranay for gr8 comment. :)

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

Thanks Dear :)

See this video : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BLCnZfoGWrY.html

Thanks and welcome

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

You're welcome!

Glad to hear that

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

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

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

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.

Your most welcome :)

Paste your code here

@@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. :-)

You're welcome!

Your Welcome :)

Parent div ko float left kardo.

@@YahooBaba thank you sir 😊

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

@@YahooBaba ok thank you so much ❣️

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

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.

@@YahooBaba oky bhai

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.

*{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.

@@abhayprataprana8173 😂😂

@@filmyworld5741 hs kio raha h bhai

@@abhayprataprana8173 bhai apne puri coding hi dal di

Your welcome :)

Thanks

Welcome!

Most welcome

Thanks

Thank you, I will

Ap course ko save kro or phir downloading py lga 2

Thanks :)

Glad you think so!... Thanks :)

Thanks dear :)

You're welcome!

Thanks Babar :)

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

@@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

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; }

@@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

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