Círculos con Efectos Hover. Transiciones CSS

Hola a todos, sean bienvenidos a este post, les traigo un tutorial sobre la realización de algunos círculos con Hover en CSS, ademas del HTML. Bueno primero que nada tienen que saber que esto es un tutorial ya existente, pero esta traducido al español, reformado (para ponerlo acá en Taringa), ya que a mi me costo encontrarlo y entenderlo así que es para su mayor comodidad, por eso decidí compartirlo con ustedes. ¡Disfruten del post! Un tutorial sobre cómo crear diferentes efectos hover interesantes en círculos con transiciones CSS y rotaciones en 3D. En el tutorial de hoy vamos a experimentar con efectos hover en círculos. Ya que tienen la propiedad de radio frontera, podemos crear formas circulares y han ido apareciendo más a menudo como elementos de diseño de sitios web. Uno de los usos que en especial me gusta ver es la imagen circular, que sólo se ve mucho más interesante de lo normal rectangular. Y porque el círculo es una forma especial, vamos a crear algunos efectos especiales activables por ello! Vamos a omitir los prefijos de proveedores en este tutorial. Pero usted, por supuesto, las encontramos en los archivos. Por lo tanto, vamos a empezar! EL HTML Para la mayoría de los ejemplos, usaremos la siguiente estructura:

• Use what you have

  by Angela Duncan View on Dribbble

• Common Causes of Stains

  by Antonio F. Mondragon View on Dribbble

• Pink Lightning

  by Charlie Wagers View on Dribbble

Aunque podríamos utilizar las imágenes aquí, vamos a darnos un poco más de libertad mediante el uso de imágenes de fondo en su lugar. Vamos a definir en las clases que comienzan con "ch-img-". Además, vamos a tener una división para la descripción del artículo con un título. Ahora, vamos a hacer algunos efectos hover! EL CSS Vamos a definir un cierto estilo común para la lista y los elementos de la lista: .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; } Podemos centrar los elementos de la lista con la visualización de inline-block y establecer la propiedad text-align de su padre al jardín central. El hack es clearfix por Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ Algunos de los ejemplos tienen una estructura diferente pero vamos a ver en que para cada ejemplo con más detalle. EJEMPLO 1 El primer ejemplo se va a revelar la descripción al aumentar la escala y también vamos a animar la caja de sombra inserción del propio artículo. Así que vamos a colocar el elemento y establezca una sombra agradable, caja de inserción y una transición: .ch-item { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; } Como se observa anteriormente, le hemos dado dos clases al elemento (no el elemento de la lista, pero su división de niño): uno es ct-item y el otro se utiliza para definir una imagen de fondo específico (background image): .ch-img-1 { background-image: url(../images/1.jpg); } .ch-img-2 { background-image: url(../images/2.jpg); } .ch-img-3 { background-image: url(../images/3.jpg); } El elemento de descripción se coloca absolutamente y vamos a darle un fondo semi-transparente mediante el establecimiento de un valor RGBA. Es la opacidad va a ser 0 y vamos a escalar a 0, también: .ch-info { position: absolute; background: rgba(63,147,147, 0.8); width: inherit; height: inherit; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); } El título del tema que tendrá algunos rellenos, márgenes ajustados y una sombra texto sin problemas: .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } El elemento de párrafo tiene 0 opacidad y una transición (queremos que se desvanecen en el vuelo estacionario, pero con un retraso): .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: all 1s ease-in-out 0.4s; } El enlace será en letras mayúsculas y vamos a hacer que el color amarillo estacionario: .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); } Y ahora, la interesante acción hover! El artículo será animar radio de su sombra, propagación de 16px a 1px: .ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } La descripción se desvanecerá y escalar hasta 1: .ch-item:hover .ch-info { transform: scale(1); opacity: 1; } Y el párrafo de la descripción sólo se desvanecen en (con retraso): .ch-item:hover .ch-info p { opacity: 1; } Y ese es el primer ejemplo! Vamos a echar un vistazo a la siguiente. EJEMPLO 2 La estructura HTML en este ejemplo es el mismo que el primero. En este ejemplo vamos a utilizar la caja de sombra del tema para llenar nuestro círculo y servir como fondo de la descripción. Por lo tanto, no hay nada especial aquí, sólo la sombra caja que tiene una línea de más valor: .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; } Y el fondo de las imágenes(background-images): .ch-img-1 { background-image: url(../images/4.jpg); } .ch-img-2 { background-image: url(../images/5.jpg); } .ch-img-3 { background-image: url(../images/6.jpg); } La descripción se reducirá de nuevo: .ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); backface-visibility: hidden; } Y el estilo que vamos a los elementos tipográficos: .ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 65px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); } En hover estacionario vamos a animar la caja de sombra inserción (el rojo uno) para radio difusión 110px (110px spread radius). Esto cubrirá todo el círculo: .ch-item:hover { box-shadow: inset 0 0 0 110px rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1); } Y vamos a ampliar la descripción y se desvanecen en: .ch-item:hover .ch-info { opacity: 1; transform: scale(1); } EJEMPLO 3 En este ejemplo, vamos a jugar con la rotación. La estructura será un poco diferente de los dos primeros ejemplos, ya que necesitamos añadir la imagen como una división segundo. De modo que el elemento de la lista se verá de la siguiente manera:

Music poster

by Jonathan Quintin View on Dribbble

La división artículo será labrado como antes (con una sombra sutil casilla): .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } El elemento imagen tendrá un específico transformar de origen (en algún lugar en el medio a la derecha) y una transición. Este será el elemento que queremos girar hacia abajo en hover lo que revela el elemento de descripción: .ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); transform-origin: 95% 40%; transition: all 0.3s ease-in-out; } Uso de la pseudo-class: después vamos a crear un cierre de latón pequeño con un gradiente radial: .ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); } Vamos a definir las imágenes de fondo para cada elemento de oro: .ch-img-1 { background-image: url(../images/7.jpg); z-index: 12; } .ch-img-2 { background-image: url(../images/8.jpg); z-index: 11; } .ch-img-3 { background-image: url(../images/9.jpg); z-index: 10; } El elemento de descripción será de estilo de la siguiente manera: .ch-info { position: absolute; width: inherit; height: inherit; border-radius: 50%; overflow: hidden; background: #c9512e url(../images/noise.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); } Los elementos tipográficos se coloca y el estilo de la siguiente manera: .ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } El anclaje será un pequeño círculo que debe moverse desde la derecha en hover: .ch-info p a { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transform: translateX(60px) rotate(90deg); } .ch-info p a:hover { background: rgba(255,255,255,0.5); } Dado que queremos que el movimiento y la opacidad a pasar con un retraso, pero el fondo flotar sin transición, vamos a separar las transiciones. En vuelo estacionario vamos a rotar el pulgar y mover / rotar el elemento de enlace: .ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); transform: rotate(-110deg); } .ch-item:hover .ch-info p a{ opacity: 1; transform: translateX(0px) rotate(0deg); } EJEMPLO 4 El ejemplo establece implicará algunas rotaciones en 3D. Por lo tanto, es necesario ajustar el estructurada con el fin de tener un recipiente para la perspectiva y una parte frontal y cara trasera. Por lo tanto, los elementos de la lista se verá de la siguiente manera:

Bears Type

by Josh Schott View on Dribbble

Como se puede ver, vamos a añadir la imagen de fondo a la división artículo y también a la parte frontal de la división volteo. El truco consiste en dar el mismo fondo a la ch-info-wrap como el body. Esto dará la ilusión como si nuestro elemento tiene un agujero. El tema tendrá el estilo habitual: .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } La envoltura adicional se utilizará para la perspectiva y vamos a añadir una transición para la caja de sombra: .ch-info-wrap{ position: absolute; width: 180px; height: 180px; border-radius: 50%; perspective: 800px; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } El ch-info div deberá preserve-3d (conservar) para la transformada de estilo y vamos a dar un paso ya que este es el elemento que va a rotar en 3D: .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; transform-style: preserve-3d; } El frente y la cara trasera de la tendrán los estilos comunes siguientes: .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; backface-visibility: hidden; } La cara trasera se gira de manera que no lo vamos a ver en primer lugar: .ch-info .ch-info-back { transform: rotate3d(0,1,0,180deg); background: #000; } Y otra vez, las imágenes de fondo: .ch-img-1 { background-image: url(../images/10.jpg); } .ch-img-2 { background-image: url(../images/11.jpg); } .ch-img-3 { background-image: url(../images/12.jpg); } ... Y los elementos tipográficos: .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); } En hover estacionario, vamos a cambiar la box shadow de la envoltura y gire el padre de la espalda y FrontFace para que podamos ver la parte de atrás: .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { transform: rotate3d(0,1,0,-180deg); } EJEMPLO 5 En este ejemplo se quiere escalar hacia abajo la parte interior miniatura a 0 y hacer que el elemento de descripción aparecen con un fundido en ella y su reducción a 1. La estructura de la quinta ejemplo será el mismo que en el ejemplo anterior. El artículo tiene el estilo habitual: .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } La envoltura de la descripción y el div div info mismo tendrá el estilo común lo siguiente: .ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; } Vamos a hacer otra vez el "hole" truco estableciendo el fondo mismo del cuerpo a la envoltura: .ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } El "frente" y "atrás" (en realidad no es un frente y cara trasera ya) estilo común: .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; } El "frente" tendrá una transición (será reducir y desaparecer): .ch-info .ch-info-front { transition: all 0.6s ease-in-out; } Y la parte posterior que contiene la descripción tendrá opacidad 0 inicialmente y se ampliará a 1,5: .ch-info .ch-info-back { opacity: 0; background: #223e87; pointer-events: none; transform: scale(1.5); transition: all 0.4s ease-in-out 0.2s; } Tenemos que establecer los eventos de puntero a ninguno ya que no desea que el elemento de "block" todo lo demás ... recuerde, es su escala, simplemente no se puede ver debido a su opacidad, pero sigue ahí. Las imágenes de fondo y los elementos tipográficos como de costumbre, sólo con algunos colores diferentes: .ch-img-1 { background-image: url(../images/13.jpg); } .ch-img-2 { background-image: url(../images/14.jpg); } .ch-img-3 { background-image: url(../images/15.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: #e7615e; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: #fff; } En vuelo estacionario vamos a escalar hacia abajo la parte interior miniatura a 0 y ajustar la opacidad a 0. Esto hará desaparecer en la parte posterior. .ch-item:hover .ch-info-front { transform: scale(0); opacity: 0; } La parte que contiene la descripción se reducirá a 1 y se desvaneció pulg También vamos a definir el evento puntero a lo que eran antes porque ahora quiero ser capaz de hacer clic en el enlace: .ch-item:hover .ch-info-back { transform: scale(1); opacity: 1; pointer-events: auto; } EJEMPLO 6 En este ejemplo queremos voltear la imagen parte interior hacia abajo para revelar la descripción. El código HTML será la misma como en los dos ejemplos anteriores. El artículo será de estilo como antes: .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } El estilo común de la envoltura y el elemento de descripción: .ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; } El contenedor tendrá la perspectiva: .ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); perspective: 800px; } El elemento de información se necesita lo siguiente estilo de transformación: .ch-info { transform-style: preserve-3d; } El frente y la cara trasera del tendrá una transición. Tenga en cuenta que esta vez no va a establecer la cara trasera visibilidad a escondidas, ya que queremos que la parte posterior de la parte interior miniaturas para mostrar cuando la tapa hacia abajo: .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.6s ease-in-out; } Vamos a establecer el correcto transformar de origen a fin de que podamos abrir hacia abajo: .ch-info .ch-info-front { transform-origin: 50% 100%; z-index: 100; box-shadow: inset 2px 1px 4px rgba(0,0,0,0.1); } Vamos a establecer un valor RGBA con 0 opacidad al fondo de la parte descriptiva: .ch-info .ch-info-back { background: rgba(230,132,107,0); } Y el estilo habitual de los otros elementos: .ch-img-1 { background-image: url(../images/16.jpg); } .ch-img-2 { background-image: url(../images/17.jpg); } .ch-img-3 { background-image: url(../images/18.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 25px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); } En vuelo estacionario, vamos a girar la parte delantera y la animación de la caja de sombra ligeramente. La parte trasera se desvanecen en el color de fondo: .ch-item:hover .ch-info-front { transform: rotate3d(1,0,0,-180deg); box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3); } .ch-item:hover .ch-info-back { background: rgba(230,132,107,0.6); } EJEMPLO 7 El último ejemplo actuará como un cubo giratorio donde revelamos la descripción haciéndolo girar en la parte posterior de la parte superior. Dado que vamos a girar cada una de las caras, no necesitaremos una capa extra. Por lo tanto, nuestro código HTML se verá de la siguiente manera:

Mouse

by Alexander Shumihin View on Dribbble

Vamos a dar un valor a la propia perspectiva artículo: .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; perspective: 900px; } El elemento con la class ch-info necesitará la preserve-3d: .ch-info{ position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; } El frente y la cara trasera tendrá una transición y la transformada de origen se establece en 50% 0%: .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.4s linear; transform-origin: 50% 0%; } Vamos a poner una sombra bonita caja de inserción a la parte frontal: .ch-info .ch-info-front { box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3); } La cara trasera se gira inicialmente para aparecer como la cara hacia abajo de un cubo: .ch-info .ch-info-back { transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); background: #000; opacity: 0; } Y el estilo habitual de las imágenes de fondo y los elementos de texto: .ch-img-1 { background-image: url(../images/19.jpg); } .ch-img-2 { background-image: url(../images/20.jpg); } .ch-img-3 { background-image: url(../images/21.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: 0 15px; padding: 60px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); } Usaremos translate3d para mover la parte delantera en el eje Y de nuestro espacio 3D y la realidad GIRA3D. También voy a desaparecer porque no quieren ver una parte del mismo después: .ch-item:hover .ch-info-front { transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); opacity: 0; } La cara trasera girará "atrás" a 0 grados (recuerda, en un principio fue rotada hacia abajo): .ch-item:hover .ch-info-back { transform: rotate3d(1,0,0,0deg); opacity: 1; } Y eso es todo! Un montón de efectos hover que permiten muchas variaciones, a modo de prueba a jugar con él! Espero que hayan disfrutado estos efectos y los encuentren inspiradores. Credits: Featured image illustration from Arnel Baluyot’s Stay Foxy. NOTA: - Dentro de los cuadros de Code, verán que esta un BBcode de color=000000. Ese BBcode no lo copien, ya que no forma parte del HTML ni del CSS. - Al hacer clic sobre las imágenes les direccionará a un Demo del Hover. - Si ven alguna mala traducción, por favor notificarme. Fuente: Ir a ... Bueno eso es todo, espero que les sea de utilidad tanto como a mi. Gracias por pasar.