Al pasar el mouse donde pone "acceso usuarios" (la caja digamos, el div, no el texto) se ilumina y esta correcto pero intento que se aplique los efectos que le puse al texto a la vez (si pasas el mouse por encima del texto de "acceso usuarios" verás que sale una linea debajo de color y el texto aumenta de tamaño. He intentando aplicar los efectos del hover del texto al div y no me funciona.
Aquí el código, pasen el mouse donde acceso usuarios para ver el problema:
* {
margin: 0px;
padding: 0px;
}
/* ----------------HEADER------------------- */
header {
display: flex;
height: 150px;
width: 2000px;
background-color: orangered;
}
.header-logo {
height: 150px;
width: 20%;
background-color: #0d8c77;
border-bottom: 4px solid #010b3d;
border-right: 4px solid #010b3d;
}
.divlogoimg {
text-align: center;
margin-top: 25px;
}
.logoimg {
width: 100px;
opacity: 0.8;
}
.header-usuarios,
.header-autonomos,
.header-empresas {
height: 150px;
width: 30%;
background-color: #009b81;
border-bottom: 4px solid #010b3d;
text-align: center;
}
.header-usuarios-text,
.header-autonomos-text,
.header-empresas-text {
margin-top: 50px;
font-family: "Rubik", sans-serif;
font-size: 32px;
color: whitesmoke;
font-weight: 400;
opacity: 0.95;
}
/*effects*/
.span-header-usuarios-text {
background: linear-gradient(to right, rgba(1, 1, 1, 0), rgba(1, 1, 1, 0)),
linear-gradient(
to right,
rgb(68, 2, 221),
rgba(152, 215, 194, 1),
rgb(63, 230, 194)
);
background-size: 100% 0.1em, 0 0.3em;
background-position: 100% 100%, 0 115%;
background-repeat: no-repeat;
transition: background-size 350ms;
border-radius: 20px;
}
.span-header-usuarios-text:hover,
.span-header-usuarios-text:focus {
background-size: 0 0.1em, 100% 0.3em;
font-size: 40px;
cursor: pointer;
-webkit-transition: font-size 2s;
transition: background-size 350ms;
}
.header-usuarios:hover,
.header-usuarios:focus {
background-color: rgb(13, 211, 158);
}
/* ----------------BODY------------------- */
body {
background-color: #006d5b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<header>
<div class="header-logo">
<div class="divlogoimg">
<img class="logoimg" src="/img/logoedit.png" />
</div>
</div>
<div class="header-usuarios">
<div class="header-usuarios-text"><span class="span-header-usuarios-text">ACCESO USUARIOS</span></div>
</div>
<div class="header-autonomos">
<div class="header-autonomos-text"><span class="span-header-autonomos-text">ACCESO AUTONOMOS</span></div>
</div>
<div class="header-empresas">
<div class="header-empresas-text"><span class="span-header-empresas-text">ACCESO EMPRESAS</span></div>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>