Quatrième exemple pratique, nous allons reattaquer le module Texte de Divi

Nous allons faire des animations avancées avec du CSS.
Lien vers le site Divi CSS

Code source :

.cross-hover .et_pb_text_inner h1 {
  position: relative;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
  padding: 0 5px;
}

.cross-hover .et_pb_text_inner h1 span{
	color: #cc000e;
}

.cross-hover .et_pb_text_inner h1:hover,
.cross-hover .et_pb_text_inner h1:focus {
	color: #cc000e;
}

.cross-hover .et_pb_text_inner h1:hover span,
.cross-hover .et_pb_text_inner h1:focus span {
	color: #2d2d2d;
}


.cross-hover .et_pb_text_inner h1::before,
.cross-hover .et_pb_text_inner h1::after {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #ea6f70;
	content: '';
	z-index: -1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cross-hover .et_pb_text_inner h1::before {
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	transform: translateY(-30px);
}

.cross-hover .et_pb_text_inner h1::after {
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	transform: translateY(30px);
}

.cross-hover .et_pb_text_inner h1:hover::before,
.cross-hover .et_pb_text_inner h1:focus::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cross-hover .et_pb_text_inner h1:hover::after,
.cross-hover .et_pb_text_inner h1:focus::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}