Galería de efectos — aipanel hosting

🖼️ categoría activa

Image effects

Hover effects, transformaciones 3D, slider antes/después, accordion, blob shapes, rotating overlays y más sobre imágenes.

47efectos

Tilt Image (3D)image

Foto con tilt 3D sutil siguiendo el cursor del mouse. Volume y profundidad con perspectiva.

<TiltImage />

Hover Zoomimage

La imagen escala 1.08-1.12 al hover. Container con overflow:hidden mantiene los bordes.

<ImageHoverZoom />

Más info

Hover Slide (4 dir)image

Overlay con texto/CTA que entra deslizándose desde un lado al hover. Direcciones: up, down, left, right.

<ImageHoverSlide />

CarolinaDiseñadora UX

Hover Flipimage

Card 3D que rota 180° al hover mostrando el back con info adicional.

<ImageHoverFlip />

CoberturaNorte de Chile

Hover Fade Captionimage

Overlay translúcido con título y descripción aparece con fade al hover.

<ImageHoverFade />

Hover Blurimage

Imagen con blur de fondo, se enfoca al hover (efecto cámara).

<ImageHoverBlur />

B/N → Colorimage

Foto en blanco y negro al inicio, recupera color al hover. Clásico para galerías de equipo.

<ImageHoverGrayscale />

Hover Scale Containerimage

El container completo (no solo la imagen) escala suavemente al hover. Útil para cards.

<ImageHoverScale />

Strip Verticalimage

Strip vertical con texto entra desde el centro, divide la imagen en dos al hover.

<ImageHoverStripV />

Strip Horizontalimage

Strip horizontal con texto entra desde el centro al hover. Variante del vertical.

<ImageHoverStripH />

Detalle

Mask Reveal (clip-path)image

Clip-path animado revela un overlay con texto al hover. Usa transform-origin para drama.

<ImageHoverMask />

Producto ProEdición limitada con acabado mate

Hover Box (image + meta)image

Box completo con image arriba + heading + descripción que se anima al hover. Estilo Divi Image Hover Box.

<ImageHoverBox />

Ana

Circular Hoverimage

Imagen recortada en círculo (border-radius 50%) con efecto al hover. Estilo Divi Circular Image Hover.

<ImageHoverCircular />

Blob Shape Imageimage

Imagen recortada con forma orgánica blob via SVG mask o clip-path. Da look editorial moderno.

<BlobShapeImage />

‹›

AntesDespués

Before / After Sliderimage

Slider horizontal arrastrable que compara dos imágenes. Ideal para mostrar transformaciones.

<BeforeAfterSlider />

↓ hover para scrollear

Scroll Image (mockup)image

Imagen "tall" que scrollea adentro de un container fijo. Perfecto para mostrar mockups largos de apps.

<ImageScrollEffect />

Floating Multi Imagesimage

Varias imágenes flotando con offsets sin/cos. Usado en heros editoriales con composición orgánica.

<FloatingMultiImages />

Equipo

Producto

Cobertura

Casos

Image Accordionimage

Imágenes side-by-side que se expanden al hover (estilo Apple). Una se agranda, las demás se reducen.

<ImageAccordion />

🔍

Ver más

Hover con ícono centralimage

Imagen oscura al hover con ícono circular central (estilo zoom/play/expand). Patrón Divinext.

<ImageHoverIcon />

NORTE

hover →

Image Text Revealimage

Texto grande con la imagen recortada por dentro aparece al hover. Background-clip: text.

<ImageTextReveal />

→

Rotating Text Overlayimage

Imagen circular con texto en SVG textPath rotando alrededor en bucle. Look badge premium.

<RotatingTextOverlay />

NEW

Corner Ribbonimage

Cinta diagonal en esquina superior derecha — para badges "NEW", "SALE", "PRO". Patrón e-commerce.

<CornerRibbon />

Carolina

Axis Flip 3D (X/Y)image

Card 3D que rota 180° en eje X o Y mostrando texto/info en el back. Mas dramático que un flip Y simple.

<AxisFlip />

Ver caso

Radial Revealimage

Overlay circular crece desde el centro al hover hasta cubrir la imagen. Look "expanding bubble".

<RadialReveal />

Producto Pro→

Sliding Caption con íconoimage

Imagen sube ligeramente al hover + caption desliza desde abajo con ícono que rota a posición. Premium look.

<SlidingCaption />

Border Draw Inimage

Borde SVG que se dibuja al hover sobre la imagen (stroke-dashoffset). Detalle elegante minimalista.

<BorderDrawIn />

Image Magnifier (lupa)image

Lupa que magnifica la imagen al mover el mouse. Para e-commerce, detalles de producto, mapas.

<ImageMagnifier />

← mové el mouse →

Panorama (scroll horizontal)image

Imagen panorámica que pana horizontalmente con el mouse. Para vistas amplias, productos angulares.

<Panorama />

Scrolleá ↓

Tile Scroll (parallax tiles)image

Grid de tiles que se mueven a velocidades distintas con el scroll. Look galería editorial moderna.

<TileScroll />

NORTE DE CHILE

Cobertura geográfica

Scrolleá adentro de este box. La imagen del header se mueve a menor velocidad que el resto del contenido — efecto parallax clásico.

Se logra con un translateY proporcional al scroll, usualmente 0.3-0.5x la velocidad real.

Parallax Imageimage

Imagen que se mueve a velocidad reducida vs el resto del contenido al scrollear. Clásico parallax.

<ParallaxImage />

Scrolleá ↓ — los cards se apilan al scroll

Diseño

Mockups en 24h

Despliegue

En terreno con QA

Operación

SLA 24/7

Scroll Stacked Cards ⭐image

Cards que se apilan al scrollear (Apple Vision Pro style). Position sticky con tops escalonados.

<ScrollStackedCards />

Producto

Equipo

Cobertura

Servicio

3D Cube Sliderimage

Slider con efecto cubo 3D rotando entre faces. transform-style: preserve-3d.

<CubeSlider3D />

Scrolling Zoom Galleryimage

Galería donde cada imagen escala según su distancia al centro del viewport mientras scrolleas.

<ScrollingZoomGallery />

NEWLanzamos Plan Empresa con SLA 99.9%INFOMantenimiento programado lunes 21:00PRODescuento 30% en primer mes hasta 31/05TIPActivá CDN para mejorar Core Web VitalsNEWLanzamos Plan Empresa con SLA 99.9%INFOMantenimiento programado lunes 21:00PRODescuento 30% en primer mes hasta 31/05TIPActivá CDN para mejorar Core Web Vitals

News Tickerimage

Banner horizontal con texto que se desplaza infinitamente (estilo bolsa de valores). Tags color-coded.

<NewsTicker />

Split Image Hover ⭐image

Imagen partida en 2 mitades que se separan al hover, revelando texto al centro. Estilo Codrops.

<SplitImageHover />

Servicio Pro

Hover para revelar shapes

Decorative Shape Revealimage

Shapes SVG decorativos (círculos, rects, líneas, polígonos) aparecen alrededor de un elemento al hover.

<DecorativeShapeReveal />

↓ scroll → la imagen se arma

Image Assemble (Mystery) ⭐image

Fragmentos volando que se ARMAN para formar la imagen al scrollear. Tiles con offset+rotate convergen al centro.

<ImageAssembleOnScroll />

↓ scroll → la imagen se desarma

Image Disassemble ⭐image

Inverso — la imagen se DESARMA en fragmentos que vuelan al scrollear. Como una explosión cinematográfica.

<ImageDisassembleOnScroll />

FEATURED

Cámara IP 4MP Pro

Visión nocturna IR 30m + IP67 outdoor.

$89.990● En stock

Interactive Image Cardimage

Card de producto con info card que slide-up al hover. Tag superior + precio + status.

<InteractiveImageCard />

Image Stackimage

Stack de imágenes apiladas con offset y rotación que se separan al hover (estilo deck of cards).

<ImageStack />

Bottom edge con onda SVG via clipPath

Wavy Galleryimage

Galería con bottom edge en forma de onda via SVG clipPath. Look orgánico para portfolios.

<WavyGallery />

FEATURE

Despliegue rápido en terreno

Equipo certificado, herramientas profesionales y proceso QA en cada etapa.

2026

Text with Mediaimage

Layout split con texto + CTA a izquierda e imagen/media a la derecha. Para feature highlights.

<TextWithMedia />

Device Mockup ⭐image

Mockup phone/tablet/laptop con switcher de dispositivo. Bezel realista para inyectar screenshots de apps o dashboards. Pattern de UI.com (Ubiquiti).

<DeviceMockup />

T✨

🌐

💖✨

🎵

¿Qué vamos a diseñar hoy?

Floating Tools 3D (Canva) ⭐image

Cards 3D con tilt + sparkle flotando sobre gradient mesh. Estilo hero de Canva con sus iconos de herramientas en composición orgánica.

<FloatingTool3D />

👟

👜

⌚

🎧

💍

E-commerce hero · 5 products floating

Floating · Products (e-commerce)image

Variante de Floating Tools 3D con icons de producto (zapato/cartera/reloj/auriculares/anillo) sobre gradient pastel. Para hero de e-commerce.

<FloatingProducts />

❤️

⭐

🔥

💬

🚀

Social media · likes/stars/fire

Floating · Social (likes/fire)image

Floating con icons sociales (corazón/estrella/fuego/chat/cohete) sobre gradient violeta a magenta. Para apps sociales/streaming/influencers.

<FloatingSocial />

📚

✏️

🧪

🎓

🔬

Educación · libros, ciencia, arte

Floating · Educationimage

Floating con icons educativos (libros/lápiz/probeta/birrete/microscopio) sobre cream→azul claro. Para edtech/cursos online/academias.

<FloatingEducation />