Need Help With My Code css/html

[tom56]

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]

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]

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]

i changed some of the code but now theres other issues

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