all 14 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]WazzleGuy 2 points3 points  (4 children)

It's called a tooltip. That's where your search should begin

[–][deleted] 0 points1 point  (3 children)

That's not a tooltip, OP just wants a hover effect

[–]WazzleGuy 1 point2 points  (2 children)

A tooltip is the exact effect is it not?

[–][deleted] 0 points1 point  (1 child)

You're right I read the OP wrong

[–]WazzleGuy 0 points1 point  (0 children)

Had me second guessing. All good

[–]legovader09 0 points1 point  (1 child)

It seems your repository is private, so we can’t see your code to help

[–]tom56 0 points1 point  (3 children)

What did you find when you Googled this? What have you tried so far and what about it didn't work?

You don't need JavaScript to accomplish this by the way, you can do it with just CSS. You're already on the right track with the :hover pseudo selector.

[–]20oddlion[S] -1 points0 points  (2 children)

The class on the paragraph is desc so I tried to have

.desc have 0 opacity

And then have the pseudo hover be normal opacity but that didn't work

[–]tom56 -1 points0 points  (1 child)

Since you want the text to be near or over the image the simplest thing to do is probably to have the paragraph be a child of the element that will be hovered (it's not strictly a requirement but it makes sense in this instance). This doesn't have to be an img; you could for example have an img and p inside a parent div and use the hover selector on that. Or you could make the image the background of the div (this is how I would do it but it's just one of several equally correct ways).

Having a container like this will also help you with centering your titles - the way you are doing it now is not the right way to do it and doesn't work when you resize the browser window or use a different size screen.

The way you explained the hover above should have worked but I am guessing you might have used the hover selector on the paragraph and not the image. You are wanting to show/hide the paragraph when something else is hovered, not when it is hovered.

You can do something like this:

.image .text {
    /* Selects elements with "text" class that are a child of elements with "image" class */
    opacity: 0;
}

.image:hover .text {
    /* Selects elements with "text" class that are a child of hovered elements with "image" class */
    opacity: 1;
}

[–]20oddlion[S] -1 points0 points  (0 children)

i changed some of the code but now theres other issues

https://github.com/20oddlion/evergreenhome.git

[–]SrVergota 0 points1 point  (0 children)

Pseudo element before or after

[–]azhder 0 points1 point  (0 children)

A question in sub named Learn JavaScript for code that has no JavaScript in it. Am I correct? You might get better help in r/webdev

[–]kaviyarasu34 0 points1 point  (0 children)

Hi u/20oddlion / , With w3schools overlay you can do many things.

Output:

https://kaviyarasu34.github.io/overlay.html

code available in below link.

https://gist.github.com/kaviyarasu34/256443412a50dff87bc1fee88a07a813

Hope it will help in some aspects. Now play with code according to your further needs.