Custom Code Guide for hover effects for list blocks

matthieu_chateau · July 5, 2024, 9:06am

Hi all!

Wondering if you can add hover effects on each card of a list block? You can!

Here is the demo page (desktop only) where you can check the results: List hovered

5 hover effects will be treated below:

Card background-color change
Card downsize
Card upsize
Card border-color change
Card border-radius change

All codes below are to be inserted in the header custom code of the page settings
Change “#list1” by your list block IDs
Always keep the !important statement in the codes

Also, as a reminder for a row backgound-color change of the table block:

<style>
#table1 [role="row"]:hover  [role="gridcell"] {
  background-color: #f8f8f8 !important;
 }
 </style>

Refer to this thread: Table color changes on mouse-over

Let’s dive in for the specific case of the list blocks

For a “List with vertical cards and tag”
Let’s say you want to change the background-color, upsize the cards and change the border color on mouse-over:

<style>
#list1 .vertical-list-item:hover {
  background-color: #FFFFFF !important;
  transform: scale(1.02) !important;
  border: 1px solid #000000 !important;
 }
</style>

For a “Grid List” (new Beta block)
Let’s say you want to change the background-color, downsize the cards, change the border-color, change the border thickness and make the border squared instead of rounded, on mouse-over:

<style>
#list1 [data-testid="grid-item"]:hover {
  background-color: #f8f8f8 !important;
  transform: scale(0.98) !important;
  border: 2px solid #000000 !important;
  border-radius: 0 !important;
 }
</style>

For a “List” (new Beta block)
Let’s say you want to change the background-color, upsize the cards and make the border squared instead of rounded (no border-color or thickness changes):

<style>
#list1 [role="listitem"]:hover {
  background-color: #f8f8f8 !important;
  transform: scale(1.02) !important;
  border-radius: 0 !important;
}


#list1 [role="listitem"] *:hover { /*this part is important as role="listitem" is also referring to other elements inside the card. Here with the * all children elements are not concerned*/
  transform: none !important;
  border-radius: none !important;
}

For a “List with horizontal sliding cards”
Let’s say you want to change the background-color and downsize the cards on mouse-over:

#list1 .horizontal-list-item:hover {
    background-color: #FFFFFF !important;
    transform: scale(0.98) !important;
}

For a “List with small cards”
Let’s say you want to change the background-color and (heavily) upsize the cards on mouse-over:

<style>
#list1 .vertical-list-item:hover {
    background-color: #f8f8f8 !important;
    transform: scale(1.2) !important;
}
</style>

Reminder that <style> </style> can be stated once in the code
For example let’s say you have 5 lists and each of these lists have a specific mouse-over effect. You should write the CSS code this way:

<style>
#list1 .vertical-list-item:hover {
  background-color: #FFFFFF !important;
  transform: scale(1.02) !important;
  border: 1px solid #000000 !important;
 }
 
#list2 [data-testid="grid-item"]:hover {
  background-color: #f8f8f8 !important;
  transform: scale(0.98) !important;
  border: 2px solid #000000 !important;
  border-radius: 0 !important;
 }
 
#list3 [role="listitem"]:hover {
  background-color: #f8f8f8 !important;
  transform: scale(1.02) !important;
  border-radius: 0 !important;
}

#list3 [role="listitem"] *:hover {
  transform: none !important;
  border-radius: none !important;
}

#list4 .horizontal-list-item:hover {
    background-color: #FFFFFF !important;
    transform: scale(0.98) !important;
}

#list5 .vertical-list-item:hover {
    background-color: #f8f8f8 !important;
    transform: scale(1.2) !important;
}
</style>

Also, a design best practice would be to avoid these mouse-over effects on mobile. Here is how to change the code to make it happen only on desktop:

<style>
@media (min-width: 769px) {
    #list1 .vertical-list-item:hover {
        background-color: #FFFFFF !important;
        transform: scale(1.02) !important;
        border: 1px solid #000000 !important;
    }

    #list2 [data-testid="grid-item"]:hover {
        background-color: #f8f8f8 !important;
        transform: scale(0.98) !important;
        border: 2px solid #000000 !important;
        border-radius: 0 !important;
    }

    #list3 [role="listitem"]:hover {
        background-color: #f8f8f8 !important;
        transform: scale(1.02) !important;
        border-radius: 0 !important;
    }

    #list3 [role="listitem"] *:hover {
        transform: none !important;
        border-radius: none !important;
    }

    #list4 .horizontal-list-item:hover {
        background-color: #FFFFFF !important;
        transform: scale(0.98) !important;
    }

    #list5 .vertical-list-item:hover {
        background-color: #f8f8f8 !important;
        transform: scale(1.2) !important;
    }
}
</style>

Thank you all!

matthieu_chateau · July 5, 2024, 10:09am

Transitions

If you want to add a transition to make the hover effects smoother, here are five transition effects you can use:

Ease. For example => transition: all 0.3s ease;
Ease-in. For example => transition: all 0.3s ease-in;
Ease-out. For example => transition: all 0.3s ease-out;
Ease-in-out. For example => transition: all 0.3s ease-in-out;
Cubic-bezier. For example => transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
Steps. For example => transition: all 0.3s steps(4, end);
CSS Variables. For example => transition: all var(--transition-duration, 0.3s) var(--transition-timing, ease);

In a code it will look like this (you understand you just need to add a lign transition: xxxxxxxx)

<style>
@media (min-width: 769px) {
    #table1 [role="row"]:hover [role="gridcell"] {
        background-color: #f8f8f8 !important;
    }

    #list1 .vertical-list-item:hover {
        background-color: #FFFFFF !important;
        transform: scale(1.02) !important;
        border: 1px solid #000000 !important;
        transition: all 0.3s ease-out;
    }

    #list2 [data-testid="grid-item"]:hover {
        background-color: #f8f8f8 !important;
        transform: scale(0.98) !important;
        border: 2px solid #000000 !important;
        border-radius: 0 !important;
        transition: all 0.3s ease;
    }

    #list3 [role="listitem"]:hover {
        background-color: #f8f8f8 !important;
        transform: scale(1.02) !important;
        border-radius: 0 !important;
        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    #list3 [role="listitem"] *:hover {
        transform: none !important;
        border-radius: none !important;
    }

    #list4 .horizontal-list-item:hover {
        background-color: #FFFFFF !important;
        transform: scale(0.98) !important;
        transition: all 0.3s steps(4, end);
    }

    #list5 .vertical-list-item:hover {
        background-color: #f8f8f8 !important;
        transform: scale(1.2) !important;
        transition: all var(--transition-duration, 0.3s) var(--transition-timing, ease);
    }
}
</style>

matthieu_chateau · July 6, 2024, 10:55am

2D transformation

You can also add some 2D transformation.
Here are two of them you can use:

skewX (or skewY). For example => transform: skewX(3deg);
rotate. For example (used with a downsize effect) => transform: scale(0.98) rotate(-5deg)

You can find an example of the rotate example in the list with the title Grid List with hover effect on each card.= - The third block on the page

https://louie293.softr.app/list-hovered (As always these hover effects are mainly for desktop)

artur · July 7, 2024, 8:58pm

Pure gold

matthieu_chateau · July 8, 2024, 3:19pm

All of these CSS codes are obvisouly available for static blocks => You can see a demo with 4 different blocks here => https://louie293.softr.app/

brettjw · September 29, 2024, 10:36pm

This is super helpful, thank you @matthieu_chateau

I’ve successfully gotten the card to ease in to 1.02 size, can modify colors etc, but can’t get it to ease out. Feel like i’ve tried just about every combination including self-help using chatgpt but to no avail. Is there something obviously wrong about my code here? Tried to copy yours exactly.

https://chester2099.preview.softr.app/events

<style>
@media (min-width: 1023px) {
    #list1 .dk0t0r3:hover {
        background-color: #FFFFFF !important;
        transform: scale(1.02) !important;
        border: 1px solid #000000 !important;
        transition: all 0.3s ease;
    }
    
    #list1 ._1cy4mxj0 {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #list1 .dk0t0r3:hover ._1cy4mxj0 {
        opacity: 1;
        visibility: visible;
    }
}
</style>

<style>
.sw-modal-container.sw-modal-size-md {
  border-radius: 10px;
  border: 2px solid #410FD3;
}
</style>

matthieu_chateau · September 30, 2024, 8:06am

Hi,

What do you mean by ease-out? The transition effect itself or when the user stops hovering? (In other words having a smooth transition when the user stops hovering)

brettjw · September 30, 2024, 10:12am

I mean the smooth transition that would happen after user stops hovering

I thought this was referred to as ease out but maybe this is where I’m going wrong

matthieu_chateau · September 30, 2024, 10:23am

Yes,

So in order to do this you need to add the transition when it’s not hovered
here is how to do so:

<style>
@media (min-width: 1023px) {
    #list1 [data-testid="grid-item"] {
        transition: all 0.3s ease !important;
    }
    #list1 [data-testid="grid-item"]:hover {
        background-color: #F8f8f8 !important;
        transform: scale(1.02) !important;
        border: 1px solid #000000 !important;
    }
    
#list1 [data-action-id="_ccvokathc"],
#list1 [data-action-id="_rdw04eo56"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
 }

#list1 [data-testid="grid-item"]:hover [data-action-id="_ccvokathc"],
#list1 [data-testid="grid-item"]:hover [data-action-id="_rdw04eo56"] {
    opacity: 1;
    visibility: visible;
 }
}
</style>

What I added is this:

    #list1 [data-testid="grid-item"] {
        transition: all 0.3s ease !important;
    }

brettjw · September 30, 2024, 1:07pm

yeah that makes sense and worked. thanks again

flavi · October 22, 2024, 10:01pm

How were you able to accomplish the Gradient Fill on hover you have set-up in the demo site?

PS- This is very cool!

brettjw · November 6, 2024, 2:11pm

any idea why the effects on blocks 3 & 4 no longer work? thank you

matthieu_chateau · November 6, 2024, 2:21pm

This must be due to changes in the selectors. The engineering team is starting to release more stable selectors.

Until there, I can’t make any updates. I will update the codes when I will have these stable selectors.

Update => I replaced old selectors by the stable versions
.dk0t0r3 replaced by [data-testid="grid-item"]
._1cy4mxj0 replaced by [data-action-id="_xxxxxxx"]

brettjw · November 12, 2024, 3:03pm

Thanks Matthieu

Just to clarify, the “selectors” or ID’s that we need to specify keep changing on Softr side.

You said you replaced the old selectors by the “stable versions”, but I thought there wasn’t anything stable yet?

Thanks again