Circle Hover Effekte
Für “DIVI-Builder” Circle Hover-Effekte mit CSS-Übergängen, die ursprünglich von Codrops erstellt wurden
Wenn Du den “DIVI-BUILDER” benutzt und auf der Suche nach einigen einfachen und coolen CSS-Effekte für Deine Webseiten bist, dann schau nicht weiter, hier bekommst Du sieben, ja SIEBEN Effekte, die einige coole Blicke auf Deine Webseite hinzufügen werden! Wenn Du nach CSS-Tutorials im Netz gesucht hast, bin ich sicher, dass Du von Codrops entweder durch die Suchmaschinen-Suche oder die Facebook-Gruppen gehört hast. Lass mich Dir sagen, diese Jungs schreiben einige der besten CSS Artikel da draußen und das seit Jahren! Daher bekommst Du hier die .json-Dateien zum Download sowie den CSS-CODE, um sie auf deine Divi-Webseite hinzuzufügen. Es wurde sowohl im benutzerdefinierten CSS-Dialogfeld unter den Divi-Themenoptionen, als auch im Stylesheet getestet. Für Anfänger empfehlen ich das benutzerdefinierte CSS-Dialogfeld.
Beispiel 1
<ul class="ch-grid"><!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item ch-img-1"><!-- [et_pb_line_break_holder] --> <div class="ch-info"><!-- [et_pb_line_break_holder] --> <h3>Schau was Du hast</h3><!-- [et_pb_line_break_holder] --> <p>Bild 1 <a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --></ul>
*CSS Beispiel 1*
/* Begin Demo 1 */
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-img-1 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/1.jpg);
}
.ch-img-2 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/2-1.jpg);
}
.ch-img-3 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/3-1.jpg);
}
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
/* End Demo 1 */
Beispiel 2
<ul class="ch-grid"> <!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item2 ch-img-5"><!-- [et_pb_line_break_holder] --> <div class="ch-info2"><!-- [et_pb_line_break_holder] --> <h3>Guck mal</h3><!-- [et_pb_line_break_holder] --> <p>Musterbild<a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --></ul>
*CSS Beispiel 2*
/* Begin Demo 2 */
.ch-item2 {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 0 rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-img-4 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/4-1.jpg);
}
.ch-img-5 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/5-1.jpg);
}
.ch-img-6 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/6-1.jpg);
}
.ch-info2 {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden; /*for a smooth font */
}
.ch-info2 h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info2 p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info2 p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info2 p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.ch-item2:hover {
box-shadow:
inset 0 0 0 110px rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.8),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item2:hover .ch-info2 {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*End Demo 2 */
Beispiel 3
<ul class="ch-grid"><!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item3"> <!-- [et_pb_line_break_holder] --> <div class="ch-info3"><!-- [et_pb_line_break_holder] --> <h3>Guck mal</h3><!-- [et_pb_line_break_holder] --> <p>Musterbild <a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div class="ch-thumb3 ch-img-7"></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </ul>
*CSS Beispiel 3*
/* Begin Demo 3 */
.ch-item3 {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ch-thumb3 {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ch-thumb3:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.ch-img-7 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/7-1.jpg);
z-index: 12;
}
.ch-img-8 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/8-1.jpg);
z-index: 11;
}
.ch-img-9 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/9-1.jpg);
z-index: 10;
}
.ch-info3 {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/noise.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
.ch-info3 h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info3 p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info3 p a {
display: block;
color: #333;
width: 80px;
height: 80px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
color: #fff;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif;
opacity: 0;
-webkit-transition:
-webkit-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-moz-transition:
-moz-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-o-transition:
-o-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-ms-transition:
-ms-transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
transition:
transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
-webkit-transform: translateX(60px) rotate(90deg);
-moz-transform: translateX(60px) rotate(90deg);
-o-transform: translateX(60px) rotate(90deg);
-ms-transform: translateX(60px) rotate(90deg);
transform: translateX(60px) rotate(90deg);
-webkit-backface-visibility: hidden;
}
.ch-info3 p a:hover {
background: rgba(255,255,255,0.5);
}
.ch-item3:hover .ch-thumb3 {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
transform: rotate(-110deg);
}
.ch-item3:hover .ch-info3 p a{
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
/*End Demo 3 */
Beispiel 4
<ul class="ch-grid"><!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item4 ch-img-10"> <!-- [et_pb_line_break_holder] --> <div class="ch-info-wrap4"><!-- [et_pb_line_break_holder] --> <div class="ch-info4"><!-- [et_pb_line_break_holder] --> <div class="ch-info-front4 ch-img-10"></div><!-- [et_pb_line_break_holder] --> <div class="ch-info-back4"><!-- [et_pb_line_break_holder] --> <h3>Musterbild</h3><!-- [et_pb_line_break_holder] --> <p>Mustermann<a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div> <!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </ul>
*CSS Beispiel 4*
/* Begin Demo 4 */
.ch-item4 {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
.ch-info-wrap4{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9 url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-info4{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ch-info4 > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.ch-info4 .ch-info-back4 {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #000;
}
.ch-img-10 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/10-1.jpg);
}
.ch-img-11 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/11-1.jpg);
}
.ch-img-12 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/12.jpg);
}
.ch-info4 h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info4 p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info4 p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info4 p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.ch-item4:hover .ch-info-wrap4 {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-item4:hover .ch-info4 {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}
/* End Demo 4 */
Beispiel 5
<ul class="ch-grid"><!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item5 ch-img-13"> <!-- [et_pb_line_break_holder] --> <div class="ch-info-wrap5"><!-- [et_pb_line_break_holder] --> <div class="ch-info5"><!-- [et_pb_line_break_holder] --> <div class="ch-info-front5 ch-img-13"></div><!-- [et_pb_line_break_holder] --> <div class="ch-info-back5"><!-- [et_pb_line_break_holder] --> <h3>Musterbild</h3><!-- [et_pb_line_break_holder] --> <p>Mustermann <a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div> <!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </ul>
*CSS Beispiel 5*
/* Begin Demo 5 */
.ch-item5 {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
.ch-info-wrap5,
.ch-info5{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}
.ch-info-wrap5 {
top: 20px;
left: 20px;
background: #f9f9f9 url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-info5 > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.ch-info5 .ch-info-front5 {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.ch-info5 .ch-info-back5 {
opacity: 0;
background: #223e87;
pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.ch-img-13 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/13.jpg);
}
.ch-img-14 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/14.jpg);
}
.ch-img-15 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/15.jpg);
}
.ch-info5 h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info5 p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info5 p a {
display: block;
color: #e7615e;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info5 p a:hover {
color: #fff;
}
.ch-item5:hover .ch-info-front5 {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.ch-item5:hover .ch-info-back5 {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
/* End Demo 5 */
Beispiel 6
<ul class="ch-grid"><!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item6 ch-img-16"> <!-- [et_pb_line_break_holder] --> <div class="ch-info-wrap6"><!-- [et_pb_line_break_holder] --> <div class="ch-info6"><!-- [et_pb_line_break_holder] --> <div class="ch-info-front6 ch-img-16"></div><!-- [et_pb_line_break_holder] --> <div class="ch-info-back6"><!-- [et_pb_line_break_holder] --> <h3>Musterbild</h3><!-- [et_pb_line_break_holder] --> <p>Mustermann <a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div> <!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </ul>
*CSS Beispiel 6*
/* Begin Demo 6 */
.ch-item6 {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
.ch-info-wrap6,
.ch-info6{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.ch-info-wrap6 {
top: 20px;
left: 20px;
background: #f9f9f9 url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-info6 {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ch-info6 > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.ch-info6 .ch-info-front6 {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}
.ch-info6 .ch-info-back6 {
background: rgba(230,132,107,0);
}
.ch-img-16 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/16.jpg);
}
.ch-img-17 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/17.jpg);
}
.ch-img-18 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/18.jpg);
}
.ch-info6 h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 25px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info6 p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info6 p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info6 p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.ch-item6:hover .ch-info-front6 {
-webkit-transform: rotate3d(1,0,0,-180deg);
-moz-transform: rotate3d(1,0,0,-180deg);
-o-transform: rotate3d(1,0,0,-180deg);
-ms-transform: rotate3d(1,0,0,-180deg);
transform: rotate3d(1,0,0,-180deg);
box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item6:hover .ch-info-back6 {
background: rgba(230,132,107,0.6);
}
/* End Demo 6 */
Beispiel 7
<ul class="ch-grid"><!-- [et_pb_line_break_holder] --> <li><!-- [et_pb_line_break_holder] --> <div class="ch-item7"> <!-- [et_pb_line_break_holder] --> <div class="ch-info7"><!-- [et_pb_line_break_holder] --> <div class="ch-info-front7 ch-img-21"></div><!-- [et_pb_line_break_holder] --> <div class="ch-info-back7"><!-- [et_pb_line_break_holder] --> <h3>Musterbild</h3><!-- [et_pb_line_break_holder] --> <p>Mustermann <a href="#">ansehen</a></p><!-- [et_pb_line_break_holder] --> </div> <!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </li><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </ul>
*CSS Beispiel 7*
/* Begin Demo 7 */
.ch-item7 {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
-webkit-perspective: 900px;
-moz-perspective: 900px;
-o-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
}
.ch-info7{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ch-info7 > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.ch-info7 .ch-info-front7 {
box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
.ch-info7 .ch-info-back7 {
-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
.ch-img-19 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/19.jpg);
}
.ch-img-20 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/20.jpg);
}
.ch-img-21 {
background-image: url(http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/21.jpg);
}
.ch-info7 h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
margin: 0 15px;
padding: 60px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info7 p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info7 p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info7 p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}
.ch-item7:hover .ch-info-front7 {
-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
.ch-item7:hover .ch-info-back7 {
-webkit-transform: rotate3d(1,0,0,0deg);
-moz-transform: rotate3d(1,0,0,0deg);
-o-transform: rotate3d(1,0,0,0deg);
-ms-transform: rotate3d(1,0,0,0deg);
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}
/* End Demo 7 */
SCHRITT 1
Hier bekommst Du die 7 .json-Dateien zum Downloaden, die jeweils in einem einzigen Abschnitt als Vollverbreitungsreihe gesetzt sind, wobei der Standard-HTML-Code bereits in ihnen enthalten ist.
HINWEIS:
Die Links in jedem der Module können angepasst werden und verwendet Standard-HTML.
Alle Circle Hover Effekte in einer Datei
SCHRITT 2
Gehe zu den Beispielen im oberen Abschnitt auf der Seite und wähle den Effekt, mit dem Du beginnen möchtest. Wähle einen von ihnen oder alle zusammen. Alle .json-Dateien sollten in die Divi-Bibliothek importiert werden.
Bild 1
Bild 2
Bild 3
Um die Datei zu Importieren, gehst Du zur DIVI-Bibliothek (Bild 1), dann oben Links auf Importieren & Exportieren (Bild 2), nun öffnet sich ein neues Fenster, dort auf Importieren (Bild 3) drücken. Anschließend musst Du zu dem Ordner navigieren, wo Du deine gerade heruntergeladene .json Datei gespeichert hast, um sie auszuwählen und zu Importieren.
SCHRITT 3
Bevor wir zum Seitenaufbau und zum CSS kommen, müssen wir ein paar Bilder vorbereiten. Die optimale Bildgröße für diese Darstellung ist 220 x 220 Pixel. Du musst auch wissen, wie Du den Pfad zu jedem Bild findest, um den Bildpfad im CSS zu ändern. Wenn Du nicht weißt, wie Du den Pfad für Dein Bild findest, klicke auf den Media-Link im Haupt-WordPress-Menü auf der linken Seite und klicke dann auf das Bild. Siehe Screenshot unten.
SCHRITT 4
Wenn alle Bilder hochgeladen sind, gehe im Dashboard auf den Reiter “Neuen Seite erstellen” und geb der neuen Seite einen Namen. Öffne die Seite im Visuellen Builder und gehe dort auf das blaue Pluszeichen, um einen neuen Abschnitt hinzuzufügen. Dort klickst Du auf “Aus der Bibliothek hinzufügen”. Nun solltest Du in der Bibliothek, deine zuvor importierte Datei sehen und sie auswählen (siehe unten). Nach dem importieren, sollten jetzt drei Felder zu sehen sein, in denen etwas Text steht.
Die drei Textfelder, die Du jetzt siehst, sind ein Code-Modul. Dort solltest Du jetzt in die Einstellungen gehen und den Inhalt nach Deinen Vorstellungen anpassen.
In “h3” kannst Du die Beschreibung ändern, im “p” den Namen und im “a” den Link ändern, so wie Du ihn haben möchtest. Das solltest Du für alle der drei Bilder ändern.
Jetzt für die Magie, der CSS-Code !!!
Denke daran, da gibt es ein paar verschiedene Möglichkeiten, das CSS hinzuzufügen. Für Anfänger empfehlen ich, die CSS in Deinem Divi Theme Options Feld einzufügen. Die fortgeschrittenen Benutzer können die CSS zu ihrer style.css hinzufügen, aber nur, wenn Du ein Child-Theme vorhanden und aktiv hast.
*Allgemeines CSS*
/* General CSS */
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
/* End General CSS */
+
CSS-Code für das jeweilige Beispiel!
Beispiel 1: Divi-Theme Benutzerdefinierte CSS
Beispiel 2: CSS-Code(3) in die Seiteneinstellungen(1) unter Fortgeschritten, in das Feld Benutzerdefinierte CSS eintragen.
HINWEIS:
Wenn Du die CSS in der benutzerdefinierten CSS-Box eingefügt hast, achte darauf, dass wenn Du den Code beim kopieren in ein lokales Dokument einfügst, einen Texteditor wie Notepad verwendest. Microsoft Word und andere Programme neigen dazu spezielle Formatierungen einzufügen. Das kann den Code mit versteckten Zeichen durcheinander bringen.
Klicke auf die Codebox unter dem Effekt den Du haben möchtest, um den gesamten Code zu markieren. Drücke Strg + C (unter Windows) oder CMD + C (auf Mac) und füge dann den Code in ein neues Textdokument ein. Wir werden den Bildpfad im nächsten Schritt ändern.
SCHRITT 5
In Schritt 4 musstest Du ein “CODE-MODUL” öffnen und den Code einfügen, den Du aus dem letzten Schritt kopiert hast. Jetzt wollen wir die Standard-URL-Pfade im CSS zu unseren Bildern ändern. Was Du in jedem der Abschnitte suchst, ist der Hintergrundbild-Teil.
Hier ist ein Beispiel aus dem ersten Hover Beispiel:
.ch-img-1 {
Hintergrundbild: url (http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/1.jpg);
}
.ch-img-2 {
Hintergrundbild: url (http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/2-1.jpg);
}
.ch-img-3 {
Hintergrundbild: url (http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/3-1.jpg);
}
Du musst jede der Bildverknüpfungen zwischen dem () ändern. Die erste Zeile, die wir ändern wollen:
http://sandboxyh.yellowhammeragency.com/wp-content/uploads/2017/05/1.jpg zu:
http://yourdomainname.com/wp-content/uploads/2017/05/your_image_name_here.jpg
Hinweis: Achte darauf, deindomainname.de mit dem richtigen Domain-Namen und das gleiche für deine Bilder zu ersetzen
Sobald Du Deine Pfadnamen in der CSS geändert hast, ist es Zeit, es entweder der benutzerdefinierten CSS-Box oder deinem Stylesheet hinzuzufügen, je nachdem, welchen Weg Du vorher gewählt hast.
Sobald Dein CSS hinzugefügt ist, ist es Zeit für den Moment der Wahrheit. Speichere Deine Seite und mache eine Vorschau, hoffentlich hast Du etwas Ähnliches wie das Beispiel oben. Wenn ja, herzlichen Glückwunsch !!
Wenn nicht, sei nicht entmutigt, gehe nochmals durch das Tutorial und überprüfen Deine Arbeit.
Viel Spaß!