Guide: Display The Buttons of Dynamic Blocks Only On Hover

Custom Coding
, ,
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