Marro:
Soy nuevo en HTML y CSS y estoy tratando de tener esta (acción) Mostrar imagen en vuelo estacionario texto.
He visto un montón de ejemplos en los que esto funciona cuando la imagen es un hijo del div, pero quiero conseguir que funcione entre divs, idealmente con el id de los elementos. Creo que mis selectores CSS son correctos, no estoy seguro de si lo que estoy tratando de hacer es válido. Cualquier ayuda se agradece, también estoy abierto a soluciones de JavaScript.
Edit: Estoy buscando una solución en la que el efecto emergente sólo funciona en el "texto importante" dentro de la etiqueta.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="textcontainer">
<p> <a id="text1">Important text</a> other text etc </p>
</div>
<div class="gallerycontainer">
<img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
</div>
</body>
<style>
#fig1 {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#text1:hover + #fig1 {
/* visibility: hidden;
display: none; */
opacity: 1.0;
}
</style>
</html>
Banzay:
Aquí es una solución. Es necesario seguir selectores adecuados encadenamiento
#fig1 {
transition: all 500ms ease-in-out;
}
.textcontainer + .gallerycontainer #fig1 {
opacity: 0;
}
.textcontainer:hover + .gallerycontainer #fig1 {
opacity: 1;
}<div class="textcontainer">
<p> <a id="text1">Important text</a> other text etc </p>
</div>
<div class="gallerycontainer">
<img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
</div>