35 efectos de imaxe CSS realmente emocionantes

Efectos de imaxe CSS

Hoxe hai imaxes nunha web convertéronse nun principal captador de atención ao usuario que se achega a el para todo tipo de temas. A partir das fotografías, viaxes, produtos ou escenas de calquera tipo, as imaxes son un dos elementos máis importantes, polo que se somos capaces de producir un efecto rechamante, esa foto terá o poder de reter ao usuario que caeu no noso sitio web.

É simplemente o que moitos destes efectos son capaces de conseguir nun visitante do sitio web. Efectos CSS que son realmente chamativos nalgúns casos e que noutros teñen como obxectivo ser máis sinxelos, aínda que sempre conseguindo o que todos buscamos: que o usuario estea atento a todo o que ofrece o noso sitio web. Enumeremos agora 33 efectos de imaxe CSS que resultan moi atractivos.

Imaxe 3D de torsión fluída

Cubo 3d

Este efecto de imaxe é realmente sorprendente cando descompón a imaxe nun cubo 3D que é capaz de xirar sobre a súa verticalidade para producir un gran efecto visual. Baseado en CSS3D, se podes implementalo no teu sitio web, o visitante quedará sen palabras.

Artigo relacionado:
35 efectos de texto CSS máis para o teu sitio web

Efecto de desprazamento en 3D

Efecto de desprazamento 3D

Outro gran efecto visual para conseguilo cando deixamos o punteiro do rato sobre a imaxe, este caer coma golpeado polo mesmo. Unha excelente animación para outro gran efecto de imaxe.

Panorama 3D CSS

CSS 3D Pânorama

HTML e CSS van da man para facer un gran efecto panorámico coma se estivésemos mirando dende o alto dun edificio dunha cidade.

Artigo relacionado:
27 efectos de texto CSS esenciais para a tipografía do teu sitio web

Imaxes en perspectiva "inclinable"

Imaxe de inclinación de perspectiva

Un experimento visual que pode servir a un propósito específico como elemento web.

Persianas venecianas

Persianas venecianas

Un gran efecto visual cada vez deixe o punteiro do rato de xeito que cambia entre os dous contrastes que dá a imaxe.

Dividir imaxe

Dividir imaxe

Ao pasar o punteiro do rato sobre a imaxe, esta ampliarase para facelo perfectamente composto.

Pase o efecto de imaxe sobre o cursor

Pasa por riba a imaxe do efecto

Ao saír de e prodúcese un efecto cuadrículapunteiro do rato sobre un punto específico a partir da imaxe.

Efecto espello 

Espejo

A imaxe pergamiños con efecto espello mentres deslizamos o punteiro do rato de dereita a esquerda e viceversa.

Imaxe con efecto reflexo

Efecto reflexo

Unha acción que busca proxectar o efecto reflexo sobre a imaxe que empregamos para este efecto de imaxe CSS.

Inclinación da imaxe en efecto de desprazamento

Efecto de inclinación

Pode chegar marearse un pouco ver como os lados da imaxe producen un dobre efecto moi sorprendente.

Efecto de desenfoque sobrevolto

Efecto de desenfoque

Mentres movemos o punteiro pola imaxe, produce un efecto de desenfoque que desaparece en segundos.

Pasa a imaxe

Pasa a imaxe

Hai un efecto de desprazamento no mesmo momento no que poñemos o punteiro rato sobre a imaxe.

Efecto de desprazamento en SVG

Pasar o SVG

Un gran efecto de paira que pon expuxo a imaxe que está oculta baixo o propio nome. Gran acabado e perfecto para amosar unha curiosa e curiosa galería de imaxes.

Do texto á imaxe no rato

Efecto SVG

O texto revela a imaxe cando pasamos o punteiro do rato cunha sorprendente animación con efecto cego que se abre dende o medio.

Parte reveladora dunha imaxe de fondo

Pasa o rato revelador

Como se tivésemos na nosa man o punto de mira dun teleobxectivo, parte da imaxe de fondo revélase ao mover o punteiro do rato.

Animación por riba do rato

Animación de imaxe por riba

Gran efecto, pero moi sinxelo na súa composición. Se buscas algo simplista e minimalista, este efecto farache namorar.

Seguimento do efecto de desprazamento

Seguimento da imaxe

Outro efecto sinxelo para un propósito específico.

Zoom da imaxe

zoom

Este é o efecto típico de zoom que seguramente quererá levar ao seu sitio web agora.

Efecto de desprazamento do zoom

Pasa o zoom por riba do rato

Outra alternativa como efecto zoom cando deixamos o punteiro rato pousado na imaxe.

Efecto lupa

Efecto lupa

Como o seu nome indica, o o punteiro do rato dará a volta á imaxe nunha lupa que a magnifica.

Non pasa o JavaScript

Non JS

Non hai JavaScript pode recrear un efecto de zoom imaxe cunha cuadrícula variable.

Efecto de superposición CSS

Pair

Un efecto CSS puro para unha capa que está montado na imaxe que temos.

Hovy para imaxes

Imaxes Hovy

Ten unha biblioteca de animacións CSS para elementos do usuario. Podes velos todos na ligazón para conseguir o que mellor se adapte a ti. Tes varios efectos para escoller de gran calidade.

Superposición de imaxes

liñas

Con animación de liña de alta calidade, recóllese capas atractivas. Outro que pode converterse no teu favorito.

Efecto de superposición de imaxe

Pasaxe circular

Volvemos con outro efecto de superposición en HTML e CSS no que as liñas circulares son as protagonistas.

Efecto de superposición de imaxe

Pair

Un sorprendente efecto de superposición que se pode empregar para diferentes elementos web. Cun pódese integrar pouca creatividade en cartas como as deste artigo.

Efecto de desprazamento con animación de iconas

Icona do rato

De alta calidade cunha animación de iconas que te chamará nos primeiros cambios. É capaz crea o texto con gran efecto.

Efecto de desprazamento con subtítulos

Subtítulos

Outro gran efecto de desprazamento con subtítulos que aparecen cunha animación moi fluída e conseguido.

Efectos de dirección sobre o 3D

Dirección 3D

Un dos efectos de imaxe máis estimulantes que verás en toda a lista. O o punteiro do rato converterase na guía do «cubo 3D».

Escala de imaxe

Escala de imaxe

Outro efecto sinxelo, pero moi vistoso sen moitos florecementos.

Efecto de sombra de iOS con React

ios sombras

Un efecto sen moita fanfarria, pero moi concreto no efecto de sombra que produce, xa que parece coma se fose levantado do "chan".

Shadow Style iOS 10

ios sombra

O punteiro do rato ten un efecto "push" sobre a imaxe que produce un gran realismo. Moi interesante.

Efecto de transición de imaxe

Mosaicos

Un marabilloso efecto de transición na que a imaxe se descompón nunha cuadrícula de cuadrículas. Podes controlar o tempo no que se produce o efecto e moito máis.

Transición de imaxe de desprazamento

scroll

Un efecto de transición moi moderno e creativo para o seu sitio web. Non perdas a cita neste CSS.

Desprazando a imaxe coa roda do rato

Transición

Terás que facelo implementalo no momento en que use a roda do rato para cambiar dunha imaxe a outra cunha gran animación de transición. Espectacular.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

6 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   Sandy Hernández dixo

    Ola. Gustáronme moito os efectos que publicaches. Por casualidade saberás como se fai o efecto no que coloca o punteiro sobre unha imaxe e se move de abaixo cara arriba, ideal para amosar unha vista previa das páxinas web. Aquí tes un exemplo do que quero dicir, na sección «ÚLTIMOS TRABALLOS DA WEB
    »Desde o sitio web selectawebs.com
    Grazas anticipadamente

  2.   Omar dixo

    Excelente páxina e publicación, resultoume moi útil xa que necesitaba algúns efectos para un panel de acceso ao portal para as aplicacións internas. Moitas grazas por estas achegas.

  3.   Gabriel rotger dixo

    Efectos excelentes. Son autodidacta, sempre me gustou moito a idea de desenvolvemento web, gustaríame moito o teu consello sobre como comezar e en que orde ir aprendendo. saúdos

  4.   estreito dixo

    Ola, grazas polo teu contido. Hoxe descobre a túa páxina. É unha marabilla. A lectura e as consultas que se poden facer nela non teñen fin. ;)

    1.    Manuel Ramírez dixo

      Ola Natalia! Alégrome de que goces das lecturas aquí en Creativos Online. Todo o mellor!

  5.   Mendoza dixo

    Ei lista espectacular de bos efectos, sería moi legal ver como aplicalos a wordpress con elementor