Posts Query - Individual styling on hover

How To
1

Hello,

I’m building a portfolio grid with the Posts item and a query loop.
Now I want to style each post item in the query individually when hovering each one of them.

For example, when I use this css to add border-radius on hover, all the post items in the query gets rounded edges, but what I want is only the item I’m hovering over to be affected.
%root%:hover .bricks-layout-inner { border-radius: 50px; }

What am I missing here?

I dug around a bit and found out that there is a class called dynamic, which pulls info from different data-field-id’s. Maybe this has something to do with the issue?

Thank for help

2

What is the main element you query in on?

Putting this on the main query loop element should be fine:

%root% {
    transition: all 350ms ease;
    overflow: hidden;
}

%root%:hover {
    border-radius: 50px;
}
3

Thank for the reply, however doesn’t seems to work.

The element I’m using is the “Posts” item and on this item I have the Query activated to bring in my Posts.

When I then add the css to the “Posts” item to change border radius of a “Post card” on hover, all Post cards get the border radius change when I hover over for example Post card #1.

The code you provided only changes to the border radius of the “Posts” item container, not the individual “Post cards” I’m bringing in with the Query.