Códigos Gadget 2ദ്ദി◝ ⩊ ◜.ᐟ

Holiss, ¿cómo están? Hoy vengo solo con un gadget, jiji. Es súper simple la verdad: consiste en una imagen normal que, al poner el cursor encima, se da vuelta y aparece otra imagen detrás de la primera (no sé si me explico ). Tiene un efecto flip con un mini borde del color que gusten; queda muy lindo .

Sin mas que decir vamos!!

Pasos a seguir:

Lo primero que hay que hacer es agregar un gadget HTML/JAVASCRIPT en el Sidebar que les gustaría ubicar el gadget , y pegar este código; como la anterior vez, les pondré entre paréntesis dónde deben ubicar las dos imágenes y el color del mini borde .

Ahora sí, pasemos al código .

<div class="flip-card">

  <div class="flip-card-inner">

    <div class="flip-front">

      <img src="(Link de la primera imagen)" />

    </div>

    <div class="flip-back">

      <img src="(Link de la segunda imagen)" />

    </div>

  </div>

</div>

<style>

.flip-card{

  width:100%;

  aspect-ratio:1/1; 

  perspective:1000px;

}

.flip-card-inner{

  position:relative;

  width:100%;

  height:100%;

  transition:transform 0.6s;

  transform-style:preserve-3d;

}

.flip-card:hover .flip-card-inner{

  transform:rotateY(180deg);

}

.flip-front, .flip-back{

  position:absolute;

  width:100%;

  height:100%;

  backface-visibility:hidden;

  border:1.5px solid #(Codigo del color del borde); 

  border-radius:10px; 

  overflow:hidden; 

}

.flip-front img,

.flip-back img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}

.flip-back{

  transform:rotateY(180deg);

}

</style>

Espero les sirva, estaré respondiendo dudas en comentarios. Gracias por leer .