Quiero desplazarme sobre el círculo giratorio para mostrar los 4 textos "acerca de". Pero el problema es que estoy usando flexbox y cuando ingreso el cursor en el área cubierta por flex, muestra el texto, pero quiero que solo aparezca al pasar el mouse sobre el círculo giratorio. Creo que el problema se debe a la superposición. Puedes ver la demo del tema aquí. https://www.youtube.com/watch?v=74Qzns1ooOI
Mi código HTML está a continuación:
.main .some-page-wrapper p { opacity: 0; } .main:hover .some-page-wrapper p { opacity: 1; } .main img:hover { width: 480px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 1; } .some-page-wrapper { /* background-color: red; */ align-items: center; justify-content: center; } .row { display: flex; flex-direction: row; flex-wrap: wrap; /* width: 100%; */ } .column { display: flex; flex-direction: column; /* flex-basis: 100%; */ flex: 1; } .orange-column { color: white; font-family: 'hermes'; font-size: 50px; /* background-color: orange; */ height: 300px; display: flex; align-items: center; justify-content: center; } .blue-column { color: white; font-family: 'hermes'; font-size: 50px; /* background-color: blue; */ height: 300px; display: flex; align-items: center; justify-content: center; } .green-column { color: white; font-family: 'hermes'; font-size: 50px; /* background-color: green; */ height: 300px; display: flex; align-items: center; justify-content: center; } <div class="main"> <img class="dp" src="assets/logo.png"> <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='orange-column'> <p>About</p> </div> </div> <div class='column'> <div class='blue-column'> <p>About</p> </div> </div> </div> <div class='row'> <div class='column'> <div class='green-column'> <p>About</p> </div> </div> <div class='column'> <div class='orange-column'> <p>About</p> </div> </div> </div> </div> </div>Si entiendo correctamente, el tamaño del cuadro de su imagen es mucho más ancho de lo que espera, lo que hace que su desplazamiento se active antes de que el cursor toque el borde visible de la imagen.
Si es así, puede redondear sus bordes en un círculo a través border-radius :
img.dp { border-radius: 50%; }Creo que hay un problema con la superposición como mencionaste. Debe colocar su imagen al frente y activar :hover solo en el elemento <img> , no en la envoltura.
Aquí hay una demostración de trabajo .
En breve:
<img> tiene position: absolute y está centrada, por lo que las columnas están "en segundo plano"<img> y apunta al elemento <p> en el elemento hermano con el selector + .