35 efectes d'imatge CSS realment estimulants

Efectes imatge CSS

A dia d'avui hi ha les imatges en un web s'han convertit en un element principal de toc d'atenció a l'usuari que s'acosta a ella per tota índole de temàtiques. Des fotografia, viatges, productes o escenes de qualsevol tipus, les imatges són un dels elements més importants, així que si som capaços de produir algun efecte cridaner, aquesta foto tindrà el poder de retenir l'usuari que ha caigut al nostre web.

És simplement el que molts d'aquests efectes són capaços d'aconseguir en el visitant d'un lloc web. Efectes CSS que són realment cridaners en alguns casos i que en altres tenen l'objectiu de ser més simples, encara que sempre aconseguint el que busquem tots: que l'usuari es quedi atent a tot el que la nostra web ofereix. Passem a llistar 33 efectes d'imatge CSS que criden poderosament l'atenció.

Fluid Twisting Image 3D

cub 3D

Aquest efecte d'imatge és realment sorprenent a l' descompondre la imatge en una galleda 3D que és capaç de rotar sobre el seu verticalitat per produir un gran efecte visual. Basat en CSS3D, si ets capaç d'implementar-en el teu lloc web, deixaràs bocabadat el visitant.

efecte especejament
Article relacionat:
35 efectes de text CSS més per al teu lloc web

3D hover effect

3D Efecte Hover

Un altre gran efecte visual a l'aconseguir que quan deixem el punter de l'ratolí sobre la imatge, aquesta caigui com colpejada pel mateix. Una gran animació per a un altre gran efecte d'imatge.

CSS 3D Panorama

CSS 3D PANORAMA

HTML i CSS es donen la mà per realitzar un gran efecte de panorama com si estiguéssim mirant des de dalt d'un edifici en una ciutat.

Creativos Online
Article relacionat:
27 efectes de text CSS essencials per a la tipografia de la teva web

Imatges en perspectiva «tilt»

Imatges Tilt Perspectiva

Un experiment visual que pot servir per a un objectiu en concret com a element web.

persianes venecianes

persianes venecianes

Un gran efecte visual cada vegada que deixis posat el punter de l'ratolí perquè canviï entre els dos contrastos que dóna la imatge.

imatge dividida

imatge dividida

A l'posar el punter de l'ratolí sobre la imatge, aquesta s'ampliarà per deixar-la perfectament composta.

Efecte d'imatge hover

Imatge Hover Effect

Es produeix un efecte de quadrícula a deixar il punter de l'ratolí sobre un punt en concret de la imatge.

efecte mirall 

Mirall

la imatge es desplaça amb un efecte mirall segons anem lliscant el punter de l'ratolí de dreta a esquerra i viceversa.

Imatge amb efecte reflex

efecte reflex

Una acció que busca projectar l'efecte de reflex en la imatge que hem fet servir per a aquest efecte d'imatge CSS.

Imatge tilt en efecte hover

efecte Tilt

Pot arribar a marejar una mica a el veure com els laterals de la imatge produeixen un efecte doble bé cridaner.

Efecte hover blur

efecte Blur

Segons anem desplaçant el punter per la imatge es produeix un efecte de desenfocament que s'esfuma en qüestió de segons.

imatge hover

Passa la imatge per sobre

Es produeix un efecte de desplaçament en el mateix instant en què hi puguem el punter de l'ratolí sobre la imatge.

Efecte hover a SVG

SVG Hover

Un gran efecte hover que posa a l'descobert la imatge que es troba amagada sota el nom mateix. De gran acabat i perfecte per mostrar una galeria d'imatges creativa i curiosa.

De text a imatge en hover

efecte SVG

El text revela la imatge quan hi puguem el punter de l'ratolí amb una animació cridanera amb efecte persiana que s'obre des del medi.

Revelant part d'una imatge de fons

hover revelant

Com si tinguéssim a les nostres mans el punt de mira d'un teleobjectiu, Es va revelant part de la imatge de fons segons movem el punter de l'ratolí.

animació hover

Image Hover Animation

De gran efecte, però ben simple en la seva composició. Si busques alguna cosa simplista i minimalista, Aquest efecte t'enamorarà.

Efecte hover de tracking

Tracking image

Un altre efecte simple per a algun objectiu en concret.

Zoom d'imatge

zoom

Aquest és el típic efecte de zoom que segurament et voldràs portar ja al teu lloc web.

Efecte zoom hover

hover zoom

Una altra alternativa com efecte de zoom quan deixem el punter de l'ratolí posat en la imatge.

efecte lupa

efecte Lupa

Tal com el seu nom indica, el punter de l'ratolí es convertirà sobre la imatge en una lupa que l'amplifica.

Sense Javascript hover

no JS

sense Javascript podràs recrear un efecte zoom d'imatge amb una reixeta variable.

Efecte de sobrecapa CSS

Passa el ratolí

Un efecte pur CSS per una capa que es munta sobre la imatge que tinguem.

Hovy per a imatges

Hovy imatges

Teniu una llibreria d'animacions CSS per elements d'usuari. Pots veure totes a l'enllaç per així aconseguir la que millor et convingui. Tens diversos efectes a triar de gran qualitat.

imatge Overlay

línies

Amb una animació de línies de gran qualitat, s'ofereix una superposició de capes cridanera. Una altra de les que es pot convertir en el teu preferida.

Efecte d'imatge overlay

hover circular

Tornem amb un altre efecte de superposició en HTML i CSS en què les línies circulars són les protagonistes.

Efecte overlay d'imatge

Passa el ratolí

Un efecte cridaner de superposició que pot ser utilitzat per a diferents elements web. amb un mica de creativitat es pot integrar en targetes com les d'aquest article.

Efecte hover amb animació d'icona

hover icona

De gran qualitat amb un animació d'icona que et engatusará en les primeres de canvi. És capaç de fer sorgir el text amb un gran efecte.

Efecte hover amb subtítols

Subtítols

Un altre gran efecte hover amb subtítols que apareixen amb una animació ben suau i aconseguida.

Efectes de direcció 3D hover

3D Direcció

Dels efectes d'imatge més estimulants que veureu de tota la llista. el punter de l'ratolí es convertirà en la guia per al «cub 3D».

Escala d'imatge

escala imatge

Un altre efecte simple, però bé cridaner sense moltes floritures.

iOS efecte d'ombra amb React

is ombres

Un efecte sense molts ostentacions, Però bé concret en l'efecte d'ombra que produeix, ja que sembla com si s'aixequés de l' «sòl».

Estil d'ombres iOS 10

is ombra

El punter de l'ratolí té un efecte de «empenta» sobre la imatge que produeix gran realisme. Molt interessant.

Efecte de transició d'imatge

Mosaics

Un meravellós efecte de transició en el qual es descompon la imatge en una reixeta de quadrícules. Podeu controlar el temps en què es produeix l'efecte i més.

Transició d'imatge en scroll

voluta

Un efecte de transició molt actual i creatiu per la teva web. No faltis a la cita en aquest CSS.

Desplaçament de la imatge amb la roda de l'ratolí

transició

hauràs de implementar-ho en el moment que facis servir la roda de el ratolí per canviar d'una imatge a un altre amb una gran animació de transició. Espectacular.


6 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   Sandy Hernández va dir

    Hola. Em va agradar molt els efectes que vas publicar. Per casualitat sabrà com es fa l'efecte on un col·loca el punter sobre una imatge i aquesta es desplaça de baix a dalt, ideal per mostrar un preview de pàgines web. Et deixo un exemple al que em refereixo, a la secció «LATEST WEBSITE JOBS
    »De la pàgina web selectawebs.com
    Gràcies per endavant

  2.   Omar va dir

    Excel·lent pàgina i post, m'ha estat molt útil ja que necessitava alguns efectes per a un portal panell d'accés a les aplicacions internes. Moltes gràcies per aquestes aportacions.

  3.   Rotger gabriel va dir

    Excel·lents efectes. Estic aprenent de forma autodidacta, sempre em va agradar molt la idea el desenvolupament web, m'agradaria molt els seus consells sobre com començar i en què ordre anar aprenent. salutacions

  4.   natalia va dir

    Hola, gràcies per els teus continguts. Avui descobrir la teva pàgina. És una meravella. No té fi la lectura i consultes que es pot fer en ella. ;)

    1.    Manuel Ramírez va dir

      Hola Natalia! M'alegro que gaudeixis amb les lectures aquí a Creativos Online. Una salutació!

  5.   mendozalz va dir

    Escolta espectacular llista de bons efectes, seria molt chevere veure com aplicar-los a wordpress amb Elementor