Este genial efecto a las imagenes lo podemos utilizar como un enlace, un banner, de menu o para lo que se nos ocurra. Lo que hace el codigo CSS es recondear la imagen tipo "card" y al pasar el cursor por encima, se transforma en una circunferencia perfecta con sombra tipo "glow". Aqui os pongo tres ejemplos y mas abajo el codigo para que lo utiliceis en vuestro blog o web. Ah, y recordad el tamaño de la imagen que añadais tiene que tener el mismo valor de ancho que de alto para que el efecto salga bien.
CODIGO:
<div class="box morphing-glowing"> <a href="ENLACE"><span class="image-wrap " style="background: url("URL IMAGEN") no-repeat scroll center center transparent; display: inline-block; height: 150px; position: relative; width: 150px;"></span></a></div> <style> .morphing-glowing .image-wrap { -webkit-transition: 0s; -moz-transition: 0s; transition: 0s; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .morphing-glowing .image-wrap:hover { -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-border-radius: 60em; -moz-border-radius: 60em; border-radius: 60em; } </style> |
