background colour change on blog list page

Site URL: https://oceanoculus.com/news-from-the-sea

I'm trying to create a background colour & shadow effect that appears when hovering over each blog entry on this blog page.

I adapted some code I used to create the effect I want on a summary block (scroll down to 'recent news from the sea'). However when I apply it to the blog page, the code gives a background colour (and shadow) to each 'element' (e.g. the blog title, the text, read more link) separately rather than each blog entry as a whole. The code I'm tried for the blog is as follows:

.collection-type-blog.view-list article :hover {
    background-color: #FAFAFA !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}

Is there any way I can create the background colour & shadow effect for each entry as a whole?

Many thanks in advance

1 hour ago, samsam said:

Site URL: https://oceanoculus.com/news-from-the-sea

I'm trying to create a background colour & shadow effect that appears when hovering over each blog entry on this blog page.

I adapted some code I used to create the effect I want on a summary block (scroll down to 'recent news from the sea'). However when I apply it to the blog page, the code gives a background colour (and shadow) to each 'element' (e.g. the blog title, the text, read more link) separately rather than each blog entry as a whole. The code I'm tried for the blog is as follows:

.collection-type-blog.view-list article :hover {
    background-color: #FAFAFA !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}

Is there any way I can create the background colour & shadow effect for each entry as a whole?

Many thanks in advance

You can try this

.collection-type-blog.view-list article :hover {
    background-color: #FAFAFA !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}
.collection-type-blog.view-item .blog-item > article {
  padding: 5px;
}
.collection-type-blog.view-item .blog-item:hover > article {
    background-color: #FAFAFA !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}

18 hours ago, bangank36 said:

You can try this

.collection-type-blog.view-list article :hover {
    background-color: #FAFAFA !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}
.collection-type-blog.view-item .blog-item > article {
  padding: 5px;
}
.collection-type-blog.view-item .blog-item:hover > article {
    background-color: #FAFAFA !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}

Ah I don't think I explained it very well (sorry). I don't want the effect on each individual blog post "page" but on the blog page that lists all the posts. If I inspect the elements on the page that lists all the blog posts, I can see that each individual post entry (title, meta-data, image, text, read more tag) has it's own article class and data item ID (see attached image). 
Does that make sense?

 

On 1/3/2021 at 4:14 PM, samsam said:

Ah I don't think I explained it very well (sorry). I don't want the effect on each individual blog post "page" but on the blog page that lists all the posts. If I inspect the elements on the page that lists all the blog posts, I can see that each individual post entry (title, meta-data, image, text, read more tag) has it's own article class and data item ID (see attached image). 
Does that make sense?

 

Do you still need help?

On 1/6/2021 at 10:33 AM, tuanphan said:

Do you still need help?

Yes please 🙂