Tengo un efecto de desplazamiento en el que cuando se pasa el cursor sobre la imagen del icono, aparece una imagen más grande (para mayor claridad). Quiero que este efecto de imagen más grande termine después de tres segundos Y aún tenga la capacidad de desplazamiento. Si la imagen se aleja y vuelve a; Quiero que la imagen más grande se cargue durante otros tres segundos. Cada vez que se pasa el cursor sobre la imagen, el efecto dura tres segundos.
Probé animaciones CSS, transiciones, setTimeout y ninguno de ellos funciona como lo necesito. Cualquier ayuda es apreciada. Tengo MUCHO código en este proyecto, así que intentaré incluir solo las partes relevantes. Gracias por adelantado.
Agregaré el código a la pregunta, una vez que descubra qué estoy haciendo mal.
Código para construir niveles para la imagen flotante
#PlayerMarker1 { position: absolute; left:2%; top: 2%; z-index: 9; } #Player1Final{ position: absolute; left:2%; top: 2%; z-index: 9; } /* Elements for Image load on hover*/ .playerMarker img{ margin: 0 5px 5px 0; } .playerMarker:hover{ background-color: transparent; } .playerMarker:hover img{ border: 1px; } .playerMarker span{ /*CSS for enlarged image*/ position: absolute; padding: 0px; left: -1000px; /*background-color: black ;*/ visibility: hidden; color: black; text-decoration: none; } .playerMarker span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .playerMarker:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 100px; /*position where enlarged image should offset horizontally */ z-index: 50; }Código para definir las imágenes.
<div id="Player1Test"> <a id="PlayerMarker1" href="#thumb1"><img src="Player Markers/Morty_Icon.png" width="auto" height="auto"/><span><img src="Player Images/Morty_Token.png" /><br /></span></a> </div>Este script agrega las clases playerMarker al elemento que necesito.
/* Script to add class to player marker ID items */ function Player1Function() { var Player1FinalTest = document.getElementById("PlayerMarker1"); Player1FinalTest.classList.add("playerMarker"); Player1FinalTest.id='Player1Final'; }Parece que las animaciones css para pulsar la imagen funcionarían bien. Ejecute el fragmento de código para probar.
img { margin: 25px; width: 100px; height: auto; } img:hover { animation: pulse 2s 1; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 50% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } <h4>Hover the mouse over image<h4> <img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png">Yogi tiene una buena respuesta usando una animación que podría adaptarse para mover claramente tu elemento. Quería agregar una respuesta manipulando los valores izquierdo y superior usando retraso.
Básicamente, está moviendo una imagen oculta de fuera de la pantalla a la pantalla. Aunque esto se siente un poco extraño de hacer, ya que puede haber formas más claras de realizar esta tarea, puede mover inmediatamente la left a la vista y retrasar el movimiento de la top fuera de la vista.
Se necesita un retraso diferente para el elemento base y el elemento base, por lo que vuelve a la posición original de inmediato y está disponible para su reutilización, pero se retrasa al alejarse al pasar el mouse.
Esto podría mantener el espíritu de su proyecto actual.
Si tiene alguna pregunta, por favor pregunte 🚀
.playerMarker { background-color: lightblue; --size: 4rem; height: var(--size); width: var(--size); } .playerMarker span { position: absolute; padding: 0px; top: 0; left: -1000px; visibility: hidden; color: black; text-decoration: none; transition: top 0s; } .playerMarker span img { border-width: 0; padding: 2px; } .playerMarker:hover span { transition: top 0s 2s; visibility: visible; top: -1000px; left: 100px; z-index: 50; } <div class="playerMarker"> <span> <img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png" /> </span> </div>