Exemple pratique #4 : Module Texte Avancé
Quatrième exemple pratique, nous allons reattaquer le module Texte de Divi
.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); }