Custom Code Guide for hover effects for list blocks

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: https://louie293.softr.app/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!

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

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)

Pure gold :slight_smile:

1 Like

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/