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

Formation Divi CSS

Maîtrisez le CSS pour faire des modifs au pixel près !

Devenez aussi expert qu’une agence au niveau du design 💪🏼