Holii, en esta entrada les estaré dejando un código para decorar su blogg, normalmente me gusta tratar de dejar mas de uno cuando subo estas cosas, pero honestamente en este momento no se que otro tutorial podría hacer jajajj
En finn, espero que les sirvaa
Fotito que se da vuelta al pasarle el mousse por encima
Este gadget yo lo tengo para poner una foto de un personaje y una frase atras, es de los primeros gadgets que añadí a mi blog y me sigue gustando mucho jejej, es de mis favoritos
<style>
/* TARJETA COMPLETA
Cambiá width y height para modificar el tamaño total */
.flip-card {
background-color: transparent;
width: 165px; /* ancho */
height: 165px; /* alto */
perspective: 1000px;
margin: 20px auto;
border-radius: 16px; /* esquinas redondeadas */
box-shadow: 0 6px 14px rgba(243, 182, 201, 0.45);
transition: box-shadow 0.3s ease;
touch-action: manipulation;
}
.flip-card:hover {
box-shadow: 0 8px 18px rgba(243, 182, 201, 0.65);
}
/* CONTENEDOR INTERNO
Maneja la animación de giro */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s ease; /* velocidad del giro */
transform-style: preserve-3d;
}
/* Giro al pasar el mouse o tocar en celular */
.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* CARA FRONTAL Y TRASERA */
.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
backface-visibility: hidden;
border-radius: 16px;
overflow: hidden;
}
/* IMAGEN DEL FRENTE */
.flip-card-front img {
width: 100%;
height: 100%;
object-fit: cover; /* recorta la imagen para llenar todo el espacio */
border: 2px solid #f3b6c9; /* color y grosor del borde */
border-radius: 16px;
}
/* PARTE TRASERA */
.flip-card-back {
/* Fondo degradado */
background: linear-gradient(145deg, #f8cdda, #fbeff3); /*modifiquen los colores por los que quieran*/
color: #6b4b5b; /* color del texto */
display: flex;
align-items: center;
justify-content: center;
padding: 14px; /* espacio interno */
text-align: center;
transform: rotateY(180deg);
/* Fuente del texto */
font-family: Georgia, serif;
font-size: 13px; /* tamaño del texto */
line-height: 1.5; /* separación entre líneas */
}
</style>
<div class="flip-card">
<div class="flip-card-inner">
<!-- =========================
FRENTE DE LA TARJETA
========================= -->
<div class="flip-card-front">
<!-- Reemplazá el link por el de tu imagen -->
<img src="ACA_VA_EL_LINK_DE_LA_IMAGEN" alt="Descripción de la imagen" />
</div>
<!-- =========================
PARTE TRASERA
========================= -->
<div class="flip-card-back">
<!-- Acá podés escribir una frase, dedicatoria,
dato curioso o cualquier texto -->
“Acá va la frase que quieras mostrar.”
</div>
</div>
</div>