Exemple pratique #4 : Module Texte Avancé

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);
}