How to create image overlay hover effect using HTML and CSS only

In this video I'll be showing you how you can create image overlay hover using HTML and CSS only.

Download Project code:

Please don't forget to like,share and subscribe my channel.

[budscottcunningham]

This video is great! Thank you for talking "instead" of just playing Keep up the good work, and thank you.

[shubhamjaiswal]

Thanks a lots bro, After watching this, now I can fix my problems very well

[patrickh]

Great tutorial, thanks so much 👍🏻 May I ask, is there a way for making the overlay half? And then on top of that also half another color or a color transparency?

[icreatestuff]

Great video finally someone who explained the actual process of what needs to be done! Great reference!

[tptttppp]

great tutorial, i am first time and not last i hope. Very simple way to do complicated effect

[sktipwr]

Awesome!
Its work well with bootstrap we have to replace the container in a different class then it will work fine.

[minhaladamjee]

Easy and to the point! Thanks for this video :) I do have a question, is there any way to increase the spaces between the rows and columns in a uniform manner? should i use &nbsp?

[kryptonnn]

Big thanks for you bro, I've been looking for this for several months

[SayKo]

good tutorial thx you
white background in your IDE very unusual

[RupeshKumar-tpfx]

Thnx a lot for giving tutorial..
But i have a problem.. when i use this hover effect in a website for practical exam purpose(i did use position ÷fixed in the header part) then all images overwrite on header while using scroll up.
Plz fix this problem..

[mustafizurrahman]

Thank you for the tutorial or provide code.

[vaibhavkhobragade]

how to give effect this way...I wanna overlay effect image instead of text...means one image hover effect of second image..Ok so how we can apply ?please explain

[vaibhavkhobragade]

I fix this problem after watching your video thanks comrade :)

[hochingcheung]

Very well-organised and explained, thank you!

[khushboogurnani]

Hi, your information was very helpful. I have created images with hover effect. However, I have a query. How do i link a page (like <a href="">) to the image class in HTML?

[miilamb]

Hey Man can you make these overlays repeat by sliding it automatically?

[nithinroyal]

why need to move in negative direction of x and y

[atelur]

Thanks! i fixed my code and now is working!

[balakrishnanyukesh]

Amazing work.Can someone share this code.The code which he gave in link doesn't work for me.

[ozian]

just what I was looking for. thank you sir