En Tilda seguro que te has preguntado cuál es la mejor forma de integrar un Javascript y CSS para personalizar tu página y conseguir que esa imagen gire, añadir un script de analítica,...
¡Vamos a ver en este post opciones para integrar un Javascript!
¡Vamos a ver en este post opciones para integrar un Javascript!
Cómo incrustar CSS en Tilda
Cómo incrustar CSS en Tilda para que imagen haga efecto espejo en el hover
La forma más fácil de hacerlo es añadir un bloque HTML. Aquí tienes un ejemplo:
<style>
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
Verás que al situarte sobre la imagen se ejecuta el efecto de espejo sobre la imagen:
La forma más fácil de hacerlo es añadir un bloque HTML. Aquí tienes un ejemplo:
<style>
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
Verás que al situarte sobre la imagen se ejecuta el efecto de espejo sobre la imagen:
Este código CSS es un ejemplo tomado de https://www.w3schools.com/howto/howto_css_flip_image.asp
Cómo incrustar CSS en Tilda para que una imagen cambie por otra con CSS
Es muy habitual tener que cambiar una imagen por otra en el hover. Aquí tienes el código para hacerlo:
<div class="cambioImagen"></div>
<style>
.cambioImagen {
width: 300px; height: 200px; background-image: url('imagen1.jpg');
background-size: cover; background-position: center;
}
.cambioImagen:hover
{ background-image: url('imagen2.jpg');
}
</style>
Y la siguiente imagen puedes ver el efecto:
Cómo incrustar Javascript en Tilda
Cómo incrustar Javascript en Tilda para que cambie la imagen en el hover
Si lo que quieres es cambiar el SRC, aquí te propongo un código que además te hace la pre-carga de las imágenes. Para que el efecto sea inmediato.
<img id="miImagen" src="imagen1.jpg" alt="Imagen">
<script>
// Pre-cargar la imagen para que esté disponible antes de hacer hover
const imgPreload = new Image();
imgPreload.src = 'imagen2.jpg'; // Aquí se pre-carga la imagen
// Selecciona la imagen que cambiará de src
const img = document.getElementById('miImagen');
// Cambiar la imagen al hacer hover
img.addEventListener('mouseover', function() {
this.src = 'imagen2.jpg'; // Cambia la imagen al hacer hover
});
// Volver a la imagen original cuando se retira el mouse
img.addEventListener('mouseout', function() {
this.src = 'imagen1.jpg'; // Vuelve a la imagen original
});
</script>
Si lo que quieres es cambiar el SRC, aquí te propongo un código que además te hace la pre-carga de las imágenes. Para que el efecto sea inmediato.
<img id="miImagen" src="imagen1.jpg" alt="Imagen">
<script>
// Pre-cargar la imagen para que esté disponible antes de hacer hover
const imgPreload = new Image();
imgPreload.src = 'imagen2.jpg'; // Aquí se pre-carga la imagen
// Selecciona la imagen que cambiará de src
const img = document.getElementById('miImagen');
// Cambiar la imagen al hacer hover
img.addEventListener('mouseover', function() {
this.src = 'imagen2.jpg'; // Cambia la imagen al hacer hover
});
// Volver a la imagen original cuando se retira el mouse
img.addEventListener('mouseout', function() {
this.src = 'imagen1.jpg'; // Vuelve a la imagen original
});
</script>
¿Y si quiero insertar CSS o Javascript en el Head en Tilda?
¡Si que puedes!
Sólo tienes que ir a los Settings del Site y escoger la opción de menú "more" de la izquierda.
Y tendrás la opción de "HTML code for the HEAD section" y "Custom CSS-code".
¡facilísimo!
Sólo tienes que ir a los Settings del Site y escoger la opción de menú "more" de la izquierda.
Y tendrás la opción de "HTML code for the HEAD section" y "Custom CSS-code".
¡facilísimo!
