Custom Code Guide for hover effects for list blocks

Custom Coding
, ,
1

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 .dk0t0r3: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 .dk0t0r3: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 .dk0t0r3: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!

2

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 .dk0t0r3: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>
1 Like
3

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 :point_down:

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

4

Pure gold :slight_smile:

1 Like
5

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/

6

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>
7

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)

8

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

9

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 .dk0t0r3 {
        transition: all 0.3s ease !important;
    }
    #list1 .dk0t0r3:hover {
        background-color: #F8f8f8 !important;
        transform: scale(1.02) !important;
        border: 1px solid #000000 !important;
    }
    
    #list1 ._1cy4mxj0 {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

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

What I added is this:

    #list1 .dk0t0r3 {
        transition: all 0.3s ease !important;
    }
10

yeah that makes sense and worked. thanks again