Image Hover Text Overlay Effect with HTML & CSS - Web Design Tutorial

[@dcode-software]

RELATED VIDEO: HOW TO USE THE BACKDROP-FILTER CSS PROPERTY 🔽 kzbin.info/www/bejne/oYOli4OZgsR-hdk 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

[@christdjinbrady4285]

The excitement from messing around with the animations I got was as if I was typing "Hello World!" again. Thanks for the amazing tutorial!

[@sehrawatnaveen1811]

This is exactly what I needed. Thank you so much for such amazing content and the way you have explained is too good. A big THANK YOU.

[@Mark-qu7ne]

Very easy to follow! Exactly what I was looking for. Thanks for taking the time to make this

[@dcode-software]

No problem :) I'm glad it could help!

[@edd6820]

Wow, this was so much more simple than I thought it'd be, thank you.

[@annamorady3366]

amongst the few tutorials that keep it simple and actually work at the same time. thanks!

[@benkiarie149]

Talk about a perfect illustration.

[@88savage]

I really needed this to complete a front-end mentor challenge. thanks!

[@HCforLife1]

I am mindblowed by quality of this channel. You have done so amazing job. You deserve a looooot more subscribers! Cheers 😊

[@dcode-software]

Thanks mate!! 😁

[@pascalquetin8110]

Very good example. Well structured and commented. Also, I am a beginner but I followed without difficulty. In addition the tone of voice and the accent are very understandable for me who does not master English well. So your Tutorial is an "international class".

[@dcode-software]

Awesome mate I appreciate that and thank you!

[@Scragg-]

“It’s very easy to achieve” - I’ve been trying off and on for a week so… really glad you made this video lol!

[@dcode-software]

You're so welcome!

[@AshMoore_111]

This tutorial is so incredibly well done. Thank you so much! This is exactly what I was looking for!

[@bluberry1996typhon]

I tried so many tutorials but only yours worked. God bless you T-T♥

[@lakshmis-yx1pi]

i was searching a lot for a video like this. Thank you so much!!!

[@thomaslovely6525]

Excellent tutorial!! I used this as part of a Bootstrap CSS grid setup for some album covers. Works really well!

[@chloegalinato4388]

Literally saved my life. Thank you 🥰🥰🥰

[@danutzz8]

great video m8 and the explanations! I was spinning 2 H around my tail to figure out a picture hover transition with btns and your video made my day...cheers!

[@dcode-software]

Looool you're welcome

[@binshafiqdigital8002]

This Video Tutorial is amazingly amazing, time saving and exactly what I was looking for.

[@MillennialGI]

what i really like about your video is how you explain the code and how it will behave while youre writing it. since i recently started coding this is essential for me. thank you very much. i appreciate the effort!

[@sagarmh7032]

Thank you Bro I wanted to like your video a thousand time that much i like your video and everyone just write the code and finish the video but you also explained about it thank you so so much

[@apnitomtheeartist18]

A big thanks alot dcode, I was having challenges with this. Cheers ♥️

[@yum3851]

Duude, thank you so much! I was really struggling with this. Thank you!!

[@yassminh]

Thank you so much! I've tried so many different solutions and this is the only one that worked so far for me!

[@CW-pd5fq]

That is amazing, ty, opacity 0 and 1 was the gamechanger for me

[@DhruviBhagat]

This video was helpful! I spent hours figuring it out before I saw this video. Thank you!

[@dcode-software]

That's awesome, I'm glad it could help!

[@PSProduktions]

dude...THANKS! This was SO helpful and very well explained! Thanks for making this video!

[@2bpencildesign603]

Well explained tutorial, I have everything working

[@오성현-s9h]

Thank you for your detailed and reasonable explanation. This video helped me a lot with my university web design project.

[@andy_frank]

Thank you very much bro, this was everyting I needed.

[@MayankJain-ly4je]

Amazing video. Straight to the point thank you.

[@KostaTsourdalakis]

Liking the head cam very nice 👍

[@its_md9372]

thx u so much man i just start learning html and css and i've been working on this so mush and my problem solved with your video thx again

[@raajvirmehta8819]

Thankyou so much. Was trying to much to do this for so long(i have recently started trying to build my own website). Finally found you video and I'm able to do it now. Thankyou again

[@jamieadah4154]

This is the best video tutorial ! Thanks alot! You just got one more subscriber

[@westend9088]

This is simply nice and easy to work. Thank you.

[@christiangazaway82]

Hello and thank you for this awesome video! How do we go about putting the images next to each other? (Like you have in the examples at the beginning?)

[@zakaryxo2237]

very helpful the opacity property worked for me better than display (cuz i added transition) and the backdrop-filter was very interesting

[@ariis2cute]

Hey you've just earned yourself a new subscriber! I'm new to css and you explained this so well. Thank you!

[@z-ref4164]

Exactly what i was searching for, thank you very much !

[@himanshuraj3472]

Brilliantly explained , Thanks !!!

[@063_muhammedrinshadsr6]

we need more tutorials like these... good work bro!!

[@brunopasqual3741]

Thanks bro. Very well done tutorial 🤝

[@ratzie]

Thank you so much for this tutorial, been searching for something like that for weeks. Cheers mate!

[@mrprogrammer1891]

thanks buddy nice and awesome easy explanation my best best wishes for you and one day you achieve 1 minion

[@louisnwosu7186]

wow, you did such a good job in your explanation..thanks

[@Sobek888]

Great video. Work of a pro.

[@GAMEROIDMALAYALAM]

Thankyou very useful and you made it easy.

[@hoduong]

Thanks for the great video tutorial

[@virajkoradia7468]

Great Video and nice explination👍👍👍😇😇

[@gioba4912]

Hi, after follow your tutorial and I can't figured out how to put the 3 examples side by side. Thanks from NYC.

[@RobertMenczel]

Great tutorial, thanks! It's working smoothly for me, I'd like to combine this with a hyperlink on the whole image, which so far I'm not managing to achieve (only for example on the title), could you maybe push me in the right direction in this? Thanks!!

[@ironside915]

You are a life saver and an awesome teacher! Thanks a lot!

[@bevilmoncrieffe733]

Thank you for this tutorial, it helped me a lot

[@rkb0088]

Hi bro I am from Bangladesh and i love your video. Thank you very much bro?🙂🙂🙂

[@dcode-software]

Hello! All good, mate

[@econmist]

Nice explanation bro. Thanks alot!

[@dcode-software]

No problem 👍

[@mhlib7569]

YOU SAVED ME MAN

[@blagtoncheah1597]

thank you very much, this video helps me a lot!

[@blagtoncheah1597]

subscribed!!

[@ivetadanhelova9486]

Thank you very much! It is working to me. Could you also advise me how to set the pictures next to each other?

[@courtneylancaster2663]

[@justchilling5893]

This was an amazing tutorial, thank you!!

[@apnitom]

Thanks this was helpful ♥️

[@mdraselmia9801]

thank you brother. I have benefited a lot.

[@__fiamy]

GRACIASSSS lo pude hacer gracias a vos, thank you so much i was looking for this all night, loviuu

[@TaufikImam-u3c]

Thanks for your content

[@fernandorochaolivera2404]

Exactly what I need. Thanks bro

[@jeffvoganphotography]

This is very helpful. Thank you for this video.

[@damjae8534]

thanks for the detailed explanation, how about how to align images with text overlays to the center

[@pos7277]

Life Saver. Thank you!

[@tammybriggs4659]

Saving lives, Thank you!

[@keithcapers4616]

Perfect video thanks

[@FullerUK]

Thanks mate, this was really helpful!

[@hanatsukamoto1855]

very helpful. Thank you! ❤

[@אביאמן]

Very good article

[@ghostkiller_ftw1014]

Great video dude, you helped me so much with my project!

[@vladimiraksyonov6622]

Thanks a lot! Your video helped me a lot!

[@ЭннВасечкина]

Absolutely COOL!!! Thank you very much!!!!!

[@dcode-software]

Lol you're welcome

[@resty1672]

Super cool and useful,thanks so much for sharing!

[@pasanhasalanka]

Great tutorial, thanks! It's very useful for me👍

[@secretzombiecreeper]

Thank you this was very helpful

[@farisfairusham]

thank you so much for this video! one question tho, if I reduces the page size, the box/image becomes smaller but the text doesn't.. do u have any idea why is that n how to fix it? thanks !

[@marenbach483]

Finally a helpfull tutorial! Thank you so much!!

[@rayunn3502]

Thank you a lot, this is very helpfull for me !

[@dcode-software]

Glad to hear that!

[@nischalneupane8197]

You earned my subscribe. Great Tutorial.

[@tikeyike]

Could you make a video of your vscode setup like your 2019 one? Like what plugins are useful for HTML, CSS and JS etc. and any particular settings or npm packages that you found to be useful. Also, things like how to set up a linter etc. Cheers again for the video!

[@s.m.mahmudurrahman3166]

You are great. Take my cordial love from heart.

[@L87-y4g]

Love it. Just what i was looking for! BUT HOW CAN I ALIGN THEM SIDE-BY-SIDE? :)

[@katerynapoperechna3627]

You can use Flex-box. First, create a parent-container and place all three item into it. Then assign display: flex; property. To create a space between the pictures assign gap: 30 px; property ( or less. It's completely up to you). To center the pictures assign the width: 80%; and margin: 0 auto; properties to the container-parent. And here we go. You have all the items aligned side-by-side. )

[@Ipdxcreative]

Dude thank you so much :) Really appreciate the help!

[@marimobaka95]

thank you so much my dude! this helped me a lot

[@dcode-software]

No problem 👍

[@darrachbarneveld6276]

Man you saved my ass bru. Legend

[@hodaelfi1941]

very good,thanks

[@ahmadaliazhary369]

Nice video, thanks!

[@javohirmurodov4670]

thank you! it has been useful to me/

[@alekodimitrov2635]

Thank you mister dcode

[@courtneylancaster2663]

Hi Dom, I know it's not how is designed to work, but I need my pictures to appear inline instead of returning down to a new line. It's driving me mental trying to work this out. Can you please help?

[@m33r4l1nn]

You're a good teacher! Have you got any videos on a different colour border appearing over an image on hover please?

[@steffox6362]

Awesome video, thank you!! The only strange thing is that my link doesn't work now. I had linked the image, but since I put the overlay over it, the link doesn't work anymore. Is it possible to use the css-overlay even if the image is supposed to act as a link?

[@junaidsalih4022]

Thank you so much!

[@adrianasilveira4561]

Great explanation. Thank you

[@dcode-software]

No worries 🙂

[@SidwSace]

Subscribed. Thank you

[@dcode-software]

Awesome, thank you!

[@kaloyanfilipov432]

Hey! Your tutorial was amazing! It really helped me and I did it. But I want three images like that in a row. How do I do that?

[@mariushansen6907]

Have same problem

[@lismorais3706]

try display in grid I did something like that with this display. I'm a noob so don''t judge to much: . grid-container { display: grid; grid-template-rows: auto auto 50px; grid-template-columns: auto auto; position: relative; left: 28em; width: 500px; height: 200px; padding-top: 3em; } .form { width: 250px; padding-right: 1em; } I created a "container" that involves all the items to account they, and them created a class for each. Have simply ways to do the same thing but in doing this is good for Responsive Web Design in mobile devices.

[@citrine6469]

very helpful.