Na podstawie Divi Module Hover Animations.

W tym tutorialu stworzymy ciekawy efekt po najechaniu kursorem myszy na moduł DIVI przy pomocy stylów CSS.

Efekt będzie polegał na powiększeniu modułu i dodaniu cienia. Można go wykorzystać do dowolnego rodzaju modułu DIVI.

Zaczynamy

Dodaj do projektu moduł Opinia albo Notka i przejdź do zakładki Niestandardowe CSS. W polu Klasa CSS wpisz: gq-module-hover

Style CSS

Przejdź w panelu adm. do menu DIVI -> Opcje szablonów graficznych i w sekcji Niestandardowe CSS (na dole strony) wpisz poniższy kod:

/*------------------------------------------------*/
/*-------------[TESTIMONIAL HOVER]----------------*/
/*--------------[BY GENO QUIROZ]------------------*/
/*------------------------------------------------*/

/* testimonials */
    .gq-module-hover {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
        -webkit-transition: all 0.6s;
        transition: all 0.6s;}
    .gq-module-hover:hover {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
        box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
        z-index: 1;}
/*------------------------------------------------*/

Efekt końcowy

I needed someone to take me from Divi 2.3 to 2.5. Geno is very responsive, honest, and budget-conscious. His knowledge of CSS, PHP, HTML, and general design are phenomenal. He has set the bar extremely high for anyone who works with me in the future.

Phil Simon

Author , Keynote Speaker

I needed someone to take me from Divi 2.3 to 2.5. Geno is very responsive, honest, and budget-conscious. His knowledge of CSS, PHP, HTML, and general design are phenomenal. He has set the bar extremely high for anyone who works with me in the future.

Phil Simon

Author , Keynote Speaker

Źródło

Na podstawie Divi Module Hover Animations.