Guide: Display The Buttons of Dynamic Blocks Only On Hover

Custom Coding
, ,
1

Hi all,

Today a guide to use custom code (CSS only) to give an effect that might might interest some of you: display the buttons of dynamic blocks on hover.

This allows you to ventilate pages where there are many dynamic blocks (each having action buttons).

First, just click to see the live demo here: Hidden Buttons - Minimalism

Just hover each of the blocks and you will see the magic.

Important Note: this is about hover effects so this won’t work on mobile or tablet. These effects are primarly made for desktop views.

Let’s dive in.

All lines with@media (min-width: 1023px) { controls the desktop view only.
Replace list-details1, list2, list3 and list6 by your own block Ids
All codes below can be used with any buttons, except the 2)
All codes below point to specific class names that are specific to each of the blocks

1) The Item-details block with title “Current Team Project”
Code to be inserted in the header custom code of the page settings:

<style>
@media (min-width: 1023px) {
#list-details1 [data-testid="button"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#list-details1:hover [data-testid="button"] {
    opacity: 1;
    visibility: visible;
 }
}
</style>

2) The grid block with title “Not Started Projects”
Code to be inserted in the header custom code of the page settings.
This code creates a button and is only used to display another page (In the demo, it’s inside a modal). In the block settings I simply go “Actions” then “Item on click” and I choose an option.

<style>
@media (min-width: 1023px) {
#list6 [data-testid="grid-item"] {
    border: 1px solid transparent;
    transition: background-color 0.3s ease !important;
    position: relative;
    overflow: hidden;
 }

#list6 [data-testid="grid-item"]:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
 }

#list6 [data-testid="grid-item"]:hover::before {
    content: "More Details";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px; 
    font-weight: 500;
    z-index: 1;
    padding: 10px 20px; 
    background-color: #000000; 
    border: 2px solid #ffffff;
    border-radius: 10px; 
    text-align: center;
    cursor: pointer; 
 }
}
</style>

3) The grid block with title “Started & Successful Projects”
Code to be inserted in the header custom code of the page settings:

<style>
@media (min-width: 1023px) {
#list2 [data-action-id="_ccvokathc"],
#list2 [data-action-id="_rdw04eo56"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
 }

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

4) The list block with title “All Tasks”
Code to be inserted in the header custom code of the page settings:

<style>
@media (min-width: 1023px) {
#list3 [data-action-id="_rwwutelf2"],
#list3 [data-action-id="_9q1hx7jc5"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
 }

#list3 [role="listitem"]:hover [data-action-id="_rwwutelf2"],
#list3 [role="listitem"]:hover [data-action-id="_9q1hx7jc5"] {
    opacity: 1;
    visibility: visible;
 }
}
</style>

Thanks!

1 Like
2

Fantastic!

1 Like
3

@matthieu_chateau This is awesome - thank you! I implemented this and successfully got the buttons to appear on mouse-over. However, I also noticed you have a colored card border and background color that appears on mouse-over, but that’s not happening for me. Is that a separate setting or CSS?

Thanks again, made my card layout so much more visually appealing

4

Yes I added some graphic design that are not in the

The thread about it is here:

If applied to the grib block you’re mentioning, the complete code to have these additional hover effects is:

<style>
@media (min-width: 1023px) {
    #list2 [data-testid="grid-item"] {
        border: 1px solid transparent;
        transition: background-color 0.3s ease !important;
    }

    #list2 [data-testid="grid-item"]:hover {
        background-color: #f8f8f8 !important;
        animation: pulsate 2s infinite !important;
    }

    @keyframes pulsate {
        0% {
            border-color: transparent;
        }
        50% {
            border-color: green;
        }
        100% {
            border-color: transparent;
        }
    } 

#list2 [data-action-id="_ccvokathc"],
#list2 [data-action-id="_rdw04eo56"] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
 }

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

nice!

1 Like