Add Text Overlays to Images on Hover with HTML & CSS

Поділитися
Вставка
  • Опубліковано 6 січ 2025

КОМЕНТАРІ • 39

  • @AFBadBoy
    @AFBadBoy 6 місяців тому +14

    i wasted 1h30 looking for a solution , you solved it in 4 minutes, i cannot thank you enough.

  • @AnAwesomeNameHere
    @AnAwesomeNameHere Рік тому +11

    Without wasting a second, stright to the point. Perfect tutorial.

  • @winchestermascarenas1527
    @winchestermascarenas1527 Рік тому +2

    the only tutorial that worked for me thank you so so much!

  • @vedant_kulkarni_22
    @vedant_kulkarni_22 Рік тому +14

    What if I have to add multiple images which is in row and coloum

  • @Mare_Brat
    @Mare_Brat Рік тому +2

    Awesome video mate
    Thank you for helping us
    Keep it up

  • @karitayade3354
    @karitayade3354 9 місяців тому

    The best video for hover

  • @VamkrishRavulwar
    @VamkrishRavulwar 2 місяці тому

    Thank you 🙌

  • @PrashantSinghRawat-xw7eo
    @PrashantSinghRawat-xw7eo 9 місяців тому

    It worked❤❤❤❤❤

  • @GlobalCoding
    @GlobalCoding 9 місяців тому

    Just Like a wow😯

  • @jeremiahogunfuwa9187
    @jeremiahogunfuwa9187 2 місяці тому

    Thank you👍🏾

  • @Rickirick.
    @Rickirick. 2 місяці тому

    Thank you for this code.

  • @pradeepjain8438
    @pradeepjain8438 2 місяці тому

    Thanks a lot..

  • @JatiNugroho-wy7zw
    @JatiNugroho-wy7zw Рік тому

    thanks for education❤

  • @sakthivelk5223
    @sakthivelk5223 4 місяці тому

    Thanks u ❤

  • @nishikisenanayake3112
    @nishikisenanayake3112 7 місяців тому

    Thank you sm!

  • @Learn-from-Expert
    @Learn-from-Expert 5 місяців тому +1

    Tnx🎉

  • @tom_b1299
    @tom_b1299 Рік тому

    very good tuto works!!!

  • @azen4184
    @azen4184 9 місяців тому

    THE GOAT

  • @BdCustomecard01
    @BdCustomecard01 Рік тому

    like it bro make more video take love

  • @GlitchSilver
    @GlitchSilver 8 місяців тому

    thank you m8!

  • @Mee_Anchor_Swapna
    @Mee_Anchor_Swapna Рік тому +1

    When I was added multiple images in column it's not working

  • @steffox6362
    @steffox6362 Рік тому +3

    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?

    • @РукавОриона-л4л
      @РукавОриона-л4л Рік тому

      same question

    • @yaudi_
      @yaudi_ 6 днів тому

      Took me forever to figure this out but basically you wanna set an tag to wrap around the image (i placed it right under the image tag), and set a "class" you can call in your css: . In css you can set "whatever"s height, width, and position attributes to wrap the image perfectly. From there it's a matter of setting the z-index to above the image, and making "whatever" only visible on hover (this way you still get the hover effect before the link is active). I wish I could be more technical but my code is a sh*tshow lmao

  • @AminulHaqueMonna
    @AminulHaqueMonna Рік тому

    thanks a lot sir

  • @JonneytheKidd
    @JonneytheKidd 10 місяців тому

    Do you have one of this exact thing but with it as a multi image slider with hover clickable text for each image?

    • @sebastian18059
      @sebastian18059 4 місяці тому

      Same I need one too...do you have pls reply 😢

  • @AswinV-b4p
    @AswinV-b4p Рік тому

    Perfect

  • @arnab_d9
    @arnab_d9 Рік тому

    thank you

  • @pathless1635
    @pathless1635 4 місяці тому

    can you share the src code ?

  • @stormshadow5305
    @stormshadow5305 5 місяців тому

    Do you know why my properties " background" and "transition" doesnt work ?

  • @mohamedhodroj2337
    @mohamedhodroj2337 Рік тому

    Can we use the same thing for multiple pictures?

  • @FacuPrograma
    @FacuPrograma Рік тому +1

    responsive?

  • @viincer22
    @viincer22 7 місяців тому +1

    Wat te fak

  • @Mizu-e6u
    @Mizu-e6u 29 днів тому

    Thanks a lot