Blurb mit Radar Hover

von TomPoAug. 15, 2018.json, CSS

In diesem kurzen Tutorial werde ich Dir zeigen, wie Du einen schönen Sonar-Hover-Effekt auf Deiner Divi-Website anwenden kannst. Es sieht wirklich fantastisch aus und kann in nur zwei einfachen Schritten erledigt werden. Schau Dir das Endergebnis an und wenn Du möchtest, fahre mit den zwei kurzen Schritten fort. Enjoy!

DEMO

Unser Services

Wir bringen unser Fachwissen und unsere jahrelange Erfahrung ein, um Ihre Ideen zum Leben zu erwecken.



Website Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

Find out more →

Search Engine

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

Find out more →



Branding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

Find out more →



Digital Marketing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

Find out more →



Wordpress Expertise

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

Find out more →



IT Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.

Find out more →

Schritt 1

Erstelle Dir eine neue Seite mit einer Überschrift
Erstelle eine neue Zeile mit 3 Spalten (grüner Rahmen)

Schritt 2

Erstelle in jede Spalte ein Blurb-Modul (Informationstext)
Füge ein Titel und eine Beschreibung ein
Wähle ein passendes Icon aus
Füge dein Link ein

Schritt 3

Füge die CSS-Klasse “blurb-card” in die Erweiterung deiner Zeile ein

Schritt 4

Füge die CSS in dein “Benutzerdefiniertes CSS” deiner Seite ein, oder Du kannst es auch unter “Divi Benutzerdefinierte CSS” einsetzen
Den Style kannst Du in der CSS nach deinen Wünschen anpassen.

Benutzerdefinierte CSS

.blurb-card .et_pb_main_blurb_image {
    margin-bottom: 0 !important;
}
.blurb-card h6 {
    color: #044793 !important;
    margin-top: 20px;
}
.blurb-card .et_pb_button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}
.blurb-card .et_pb_blurb {
    margin-bottom: 0 !important;
}
.blurb-card .et_pb_column {
    position: relative;
}
.blurb-card .et_pb_blurb_container {
    background: #fff;
    padding: 75px 25px 25px 25px;
    border-radius: 4px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important;
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -kthtml-transition: all 0.1s linear;
    transition: all 0.1s linear;
    margin-top: -50px;
}
.blurb-card .et_pb_column:hover .et_pb_blurb_container {
    -webkit-box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
    -moz-box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
    box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -kthtml-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

/* Effect 8 */
.blurb-card .et-pb-icon {
    padding: 33px;
    font-size: 35px;
    position: relative;
    z-index: 1;
    color: #ededed!important;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -kthtml-transition: all 0.1s linear;
  background-color: #044793 !important;
  
}
.blurb-card .et-pb-icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.blurb-card .et-pb-icon:before {
    content: '';
    display: block;
}
.blurb-card .et-pb-icon {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.blurb-card .et-pb-icon:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.blurb-card .et_pb_column:hover .et-pb-icon {
    /*background: rgba(255, 255, 255, 0.05);*/
  background-color:#d1d1d1 !important;
    color: #044793 !important;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -kthtml-transition: all 0.1s linear;
}
.blurb-card .et_pb_column:hover .et-pb-icon:after {
    -webkit-animation: sonarEffect 0.5s ease-out 50ms;
    -moz-animation: sonarEffect 0.5s ease-out 75ms;
    animation: sonarEffect 0.5s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px #3b3b3b, 0 0 10px 10px #3b3b3b, 0 0 0 10px #3b3b3b;
    }
    100% {
        box-shadow: 0 0 0 2px #3b3b3b, 0 0 10px 10px #3b3b3b, 0 0 0 10px #3b3b3b;
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px #3b3b3b, 0 0 10px 10px #3b3b3b, 0 0 0 10px #3b3b3b;
    }
    100% {
        box-shadow: 0 0 0 2px #3b3b3b, 0 0 10px 10px #3b3b3b, 0 0 0 10px #3b3b3b;
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px #3b3b3b, 0 0 10px 10px #3b3b3b, 0 0 0 10px #3b3b3b;
    }
    100% {
        box-shadow: 0 0 0 2px #3b3b3b, 0 0 10px 10px #3b3b3b, 0 0 0 10px #3b3b3b;
        transform: scale(1.5);
        opacity: 0;
    }
}

Wenn Du der Anleitung nicht folgen kannst, oder Du keine Lust hast alles nachzubauen, dann kannst Du dir ganz einfach eine fertige .json Datei hier downloaden und musst sie dann nur in deine Seite importieren.
In der .json Datei ist der CSS-Code in einem Code-Modul eingebunden und muss nicht in das Benutzerdefinierte CSS eingebunden werden.

.json Download

Den Style kannst Du im “Code-Modul” in der CSS nach deinen Wünschen anpassen.

Viel Spaß!