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
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.
3D hover effect
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
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.
Imatges en perspectiva «tilt»
Un experiment visual que pot servir per a un objectiu en concret com a element web.
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
A l'posar el punter de l'ratolí sobre la imatge, aquesta s'ampliarà per deixar-la perfectament composta.
Efecte d'imatge hover
Es produeix un efecte de quadrícula a deixar il punter de l'ratolí sobre un punt en concret de la imatge.
efecte 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
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
Pot arribar a marejar una mica a el veure com els laterals de la imatge produeixen un efecte doble bé cridaner.
Efecte hover 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
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
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
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
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
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
Un altre efecte simple per a algun objectiu en concret.
Zoom d'imatge
Aquest és el típic efecte de zoom que segurament et voldràs portar ja al teu lloc web.
Efecte zoom hover
Una altra alternativa com efecte de zoom quan deixem el punter de l'ratolí posat en la imatge.
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
sense Javascript podràs recrear un efecte zoom d'imatge amb una reixeta variable.
Efecte de sobrecapa CSS
Un efecte pur CSS per una capa que es munta sobre la imatge que tinguem.
Hovy per a 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
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
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
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
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
Un altre gran efecte hover amb subtítols que apareixen amb una animació ben suau i aconseguida.
Efectes de direcció 3D hover
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
Un altre efecte simple, però bé cridaner sense moltes floritures.
iOS efecte d'ombra amb React
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
El punter de l'ratolí té un efecte de «empenta» sobre la imatge que produeix gran realisme. Molt interessant.
Efecte de transició d'imatge
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
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í
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.
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
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.
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
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. ;)
Hola Natalia! M'alegro que gaudeixis amb les lectures aquí a Creativos Online. Una salutació!
Escolta espectacular llista de bons efectes, seria molt chevere veure com aplicar-los a wordpress amb Elementor