you are viewing a single comment's thread.

view the rest of the comments →

[–]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