En dispositivos móviles, estoy tratando de crear una palanca que aparece en la parte superior de una imagen, que cuando se toca, hace que el texto también aparezca en la parte superior de la imagen.
Básicamente, quiero recrear cómo el periódico The Guardian maneja el pequeño ícono (i) en la esquina inferior derecha del dispositivo móvil.
Y en el escritorio, el texto está allí de forma predeterminada debajo de la imagen y el ícono (i) desapareció.
Hasta ahora he logrado encontrar una solución similar en otro lugar en línea, pero no funciona del todo bien como lo necesito.
function toggleText() { var text = document.getElementById("demo"); if (text.style.display === "none") { text.style.display = "block"; } else { text.style.display = "none"; } } #blog { width: 100%; } #blog figure { position: relative; } #blog figure figcaption { display: none; position: absolute; bottom: 0; left: 0; box-sizing: border-box; width: 100%; color: black; text-align: left; background: rgba(0, 0, 0, 0.5); } #blog figure button { position: absolute; bottom: 0; right: 0; color: black; border: 5px solid black; } <div id="blog"> <figure> <img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example"> <figcaption id="demo" style='display: none'>A photo of a slab of marble for example</figcaption> <button type='button' onclick="toggleText()">(i)</button> </figure> </div>on* controladores, use Element.addEventListener() en su lugarstyle en línea.el.style.display === "something" para verificar los estilos de display . Use Element.classList.toggle() en su lugar Este sencillo ejemplo usa JavaScript para alternar simplemente un nombre de clase "is-active" en el elemento principal del botón, la figure Elemento.
Todo lo demás (cambio de símbolo de icono, animación de subtítulos, etc.) es manejado únicamente por CSS:
document.querySelectorAll("figure button").forEach(EL_btn => { EL_btn.addEventListener("click", () => { EL_btn.closest("figure").classList.toggle("is-active"); }); }); /* QuickReset */ * {margin: 0; box-sizing: border-box;} img { max-width: 100%; /* Never extend images more than available */ } figure { position: relative; overflow: hidden; /* overflow hidden to allow figcaption hide bottom */ } figure img { display: block; /* prevent "bottom space" caused by inline elements */ } figure figcaption { position: absolute; width: 100%; bottom: 0; padding: 1rem; padding-right: 4rem; /* Prevent text going under the button icon */ color: #fff; background: rgba(0, 0, 0, 0.5); transform: translateY(100%); /* Move down, out of view */ transition: transform 0.3s; /* Add some transition animation */ } figure.is-active figcaption { transform: translateY(0%); /* Move into view */ } figure button { position: absolute; width: 2rem; height: 2rem; bottom: 0.5rem; right: 0.5rem; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, 0.5); border: 0; cursor: pointer; } figure button::before { content: "\2139"; /* i icon */ } figure.is-active button::before { content: "\2A09"; /* x icon */ } <figure> <img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example"> <figcaption>A photo of a slab of marble for example</figcaption> <button type="button"></button> </figure>Lo anterior funcionará para cualquier cantidad de dichos elementos en su sitio web sin necesidad de agregar más CSS o JS.
Veo un par de cosas que podrían estropear esto, una es el hecho de que no hay nada que haga que su imagen se ajuste a la pantalla de su teléfono móvil, además, también hay un margen que está ahí de manera predeterminada, por lo que sugiero estos cambios en el CSS :
Primero establecería el tamaño del cuadro en border-box y el margen en 0, por cierto, esto debería ser una práctica habitual.
*{ box-sizing: border-box; margin: 0; }Luego selecciona la imagen y haz que se ajuste a tu página como tal
#blog figure img{ height: auto; width:100%; }Finalmente, para un poco de estilo, puede agregar algo de relleno a su div de blog para hacer que la imagen sea un poco más pequeña en su pantalla
#blog { width: 100%; padding: 35px; }Este es el violín para ello.