Aero - Image Hover Effects

What is Aero?

Images alone are a powerful way to communicate information. At the same time, animations are great at capturing the user’s attention. That’s why Aero combines both into a collection of Web Components. This allows everyone that uses it to touch people’s hearts.

Aero’s Features

Future Proof

The world of web development is always evolving. Stencil is a compiler that evolves alongside Web Standards. That’s why it stays at the core of Aero. The components generated in the end build on top of native Web Components. This allows Aero’s components to be always up to date with the latest standards. A simple recompile of the project will bring the latest optimizations. There is no need to start over and over again.

Frameworks Integration

Aero is a collection of native Web Components. Thus, it’s possible to integrate it into any framework or no framework at all. Unfortunately, the experience of integrating vanilla Web Components can be tricky at times. More information here. That’s why Aero comes with special bindings for all major frameworks. This is to accommodate the various issues that might occur. Currently, it supports React, Vue, and Angular.

Wide Browser Support

Compatibility with all modern browsers is fundamental for any web project. That’s why, right out of the box, Aero is compatible with all modern browsers. Also, through polyfills, there is support for older browsers too.

Modern Development Workflow

Aero’s components integrate into any type of web development workflow. It is available as a module, or it’s possible to integrate it by dropping a few files into the target project. Also, there is full support for TypeScript and Sass.

Image Grid Out Of The Box

Creating image grids is something very important for many projects. This is especially true when it’s necessary to create a portfolio. That’s why Aero comes with a powerful customizable image grid component out of the box. There are even global controls for all the image cards inside it.

Optimized for Search Engines (SEO)

Aero’s generated code meets the best SEO practices. Thus, the search engines can index all images without any extra effort.

Well Crafted Documentation

Creating very easy-to-use documentation is not simple. A lot of effort was necessary to craft Aero’s documentation. It is possible to open it into the browser or to build it as a static website. Also, it is available as Markdown files.

What’s New

v2.5.0 (Mar 18, 2022)

• Markdown documentation
• Dependencies update

v2.4.3 (Sep 17, 2021)

• Improved documentation

v2.4.2 (Sep 10, 2021)

• Improved documentation

v2.4.1 (Sep 9, 2021)

• Dependencies update

v2.4.0 (Sep 8, 2021)

• Improved workflow
• Improved yarn and npm support
• Dependencies update

v2.3.3 (Aug 20, 2021)

• Added support for React
• Added support for Vue
• Added support for Angular
• Migrated from npm to yarn
• Dependencies update

v2.3.2 (May 12, 2021)

• Dependencies update

v2.3.1 (Mar 9, 2021)

• Dependencies update

v2.3.0 (Dec 31, 2020)

• Added grid global effect for children cards
• Added grid global border radius for children cards
• Fixed minor bugs

v2.2.0 (Nov 21, 2020)

• Full migration to Stencil
• Created test specs
• Refactor aero-effect to aero-card
• Made card configurable through parameters
• Made grid configurable through parameters
• Documentation update
• Updated preview banner
• Fixed grid broken squares parameter
• Fixed broken rendering
• Fixed sense-3d rendering
• Fixed custom classes

v2.1.0 (Oct 29, 2020)

• Refreshed branding
• Refreshed banners
• Refreshed demo page
• Support for Web Components
• Support for Web Components in older browsers with Polyfills
• Improved documentation
• Fixed broken rendering

v2.0.0 (Aug 4, 2020) – New Implementation

• New branding
• New demo page
• New documentation
• New architecture
• New image grid
• New gulp based workflow
• New sass implementation
• New pug effect mixin
• New typescript effect interactions
• New mouse direction awareness
• New npm scripts automation
• Support for development mode
• Support for production mode
• Support for image optimization
• Support for image srcset
• Support for all modern browsers
• Support for full configuration
• Support for responsive layout
• Support for different types of devices
• Support for CSS variables live configuration
• 4 presets are available
• 18 curated and refreshed image hover effects
• Significant performance improvements
• Dropped support for IE

v1.5.0 (Jun 14, 2016)

• 5+ new effects
• 1+ bonus effect
• Visual improvements
• New demo page
• Sass files refactoring
• Sass color config variables
• Sass animations config variables
• Sass transitions config variables
• Sass modularization
• Code cleaning and refactoring
• Code commenting improvements
• Size reduced from 56kb to 39kb
• SVG compatibility for .img-box class object
• HTML structure improvements
• HTML/CSS class scope improvements
• Minor bugs fixes

v1.4.0 (Oct 19, 2015)

• 1+ new effect
• Visual improvements
• SASS files refactoring

v1.3.0 (Oct 9, 2015)

• 3+ new effects
• Consistent transitions improvement
• Code optimization
• Code cleaning
• Code refactoring
• Core 3D effects send to GPU with CSS3
• Small mobile bug fixes

v1.2.0 (Sept 19, 2015)

• 2+ new effects
• Consistent performance improvements
• Optimization for WordPress

v1.1.0 (Sept 15, 2015)

• Minor bugs fixed
• Code optimization

v1.0.0 – Initial Release (Aug 15, 2015)

• 10 CSS3 Hover Effects
• Fully Responsive