├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.376b664e.jpg ├── 1.abdece96.jpg ├── 1.b2dd7476.jpg ├── 1.da07050c.jpg ├── 1.e7864b95.jpg ├── 10.03974b57.jpg ├── 10.4f66b9bf.jpg ├── 10.821b07c9.jpg ├── 10.ba0c70ca.jpg ├── 10.e7aba2b1.jpg ├── 11.1016e8dc.jpg ├── 11.1201dde3.jpg ├── 11.bc61a1e3.jpg ├── 11.e51eb489.jpg ├── 11.e75a941d.jpg ├── 12.0aa60765.jpg ├── 12.4061d1aa.jpg ├── 12.60b51b29.jpg ├── 12.aac53079.jpg ├── 12.d01438d5.jpg ├── 13.1bbeab4e.jpg ├── 13.539c169f.jpg ├── 13.8a7d35cc.jpg ├── 13.8f6cb021.jpg ├── 13.a8b9e252.jpg ├── 14.4893af22.jpg ├── 14.bfa405e1.jpg ├── 14.e53accbf.jpg ├── 14.e7006644.jpg ├── 14.fab38393.jpg ├── 15.4698baa6.jpg ├── 15.476bebe4.jpg ├── 15.4aca273e.jpg ├── 15.73adc2fc.jpg ├── 15.cfb90561.jpg ├── 16.25da4b09.jpg ├── 16.a7efd02b.jpg ├── 16.bf2e6aed.jpg ├── 16.bfa6457c.jpg ├── 16.e318dd5a.jpg ├── 17.389c5b13.jpg ├── 17.71510293.jpg ├── 17.79dee7e7.jpg ├── 17.86f96a6e.jpg ├── 17.9b83f4dd.jpg ├── 18.34ee15ce.jpg ├── 18.87b08370.jpg ├── 18.8ad6a6a5.jpg ├── 18.a47fa7a9.jpg ├── 18.c5d0ab34.jpg ├── 19.5373093f.jpg ├── 19.70099d5f.jpg ├── 19.8091b01d.jpg ├── 19.c6d339c0.jpg ├── 19.d34b3515.jpg ├── 2.40f30460.jpg ├── 2.56d2adb9.jpg ├── 2.c629256c.jpg ├── 2.c8c223d9.jpg ├── 2.dd89043e.jpg ├── 20.0917d8dc.jpg ├── 20.5528d5b7.jpg ├── 20.79785ea9.jpg ├── 20.aa242cb6.jpg ├── 20.eb05c89d.jpg ├── 3.1e79277a.jpg ├── 3.449799ca.jpg ├── 3.4b150b5c.jpg ├── 3.bc341edf.jpg ├── 3.ecfa820e.jpg ├── 4.00c00e57.jpg ├── 4.206ad742.jpg ├── 4.500b54f2.jpg ├── 4.6e841dd2.jpg ├── 4.8ed29d64.jpg ├── 5.208189fa.jpg ├── 5.2667ae3b.jpg ├── 5.296d34a5.jpg ├── 5.72557cf0.jpg ├── 5.7795c51e.jpg ├── 6.3ade7d4e.jpg ├── 6.aa64fc47.jpg ├── 6.ac3cd742.jpg ├── 6.bd253403.jpg ├── 6.dae49e4f.jpg ├── 7.0a1756e3.jpg ├── 7.4183a781.jpg ├── 7.46abac3f.jpg ├── 7.5ac05771.jpg ├── 7.92c49dce.jpg ├── 8.029c7dba.jpg ├── 8.2c69e487.jpg ├── 8.65c0cc1f.jpg ├── 8.698e0dbd.jpg ├── 8.94720f30.jpg ├── 9.022cbb30.jpg ├── 9.1331c02a.jpg ├── 9.16738e2f.jpg ├── 9.a23c1629.jpg ├── 9.c1ab683f.jpg ├── base.894953f3.css ├── base.d0d64955.css ├── base.dcef311f.css ├── base.e2973d14.css ├── base.efb2c857.css ├── demo1.151408fb.js ├── demo2.44794d1a.js ├── demo3.b516845c.js ├── demo4.e22d7780.js ├── demo5.c1b42ce3.js ├── favicon.26242483.ico ├── img │ ├── demo1 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── demo2 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── demo3 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── demo4 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ └── demo5 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html └── index5.html ├── package.json └── src ├── css ├── demo1 │ └── base.css ├── demo2 │ └── base.css ├── demo3 │ └── base.css ├── demo4 │ └── base.css └── demo5 │ └── base.css ├── favicon.ico ├── img ├── demo1 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── demo2 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── demo3 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── demo4 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg └── demo5 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html └── js ├── cursor.js ├── demo1 ├── index.js ├── menu.js └── menuItem.js ├── demo2 ├── index.js ├── menu.js └── menuItem.js ├── demo3 ├── index.js ├── menu.js └── menuItem.js ├── demo4 ├── index.js ├── menu.js └── menuItem.js ├── demo5 ├── index.js ├── menu.js └── menuItem.js ├── preloader.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.cache 3 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rapid Image Hover Menu Effects 2 | 3 | A set of hover effects on menu items with images. 4 | 5 | ![Rapid Image Hover Menu](https://tympanus.net/codrops/wp-content/uploads/2020/07/MenuEffects_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=50412) 8 | 9 | [Demo](http://tympanus.net/Development/RapidImageHoverMenuEffects/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from Unsplash.com 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/1.376b664e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/1.376b664e.jpg -------------------------------------------------------------------------------- /dist/1.abdece96.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/1.abdece96.jpg -------------------------------------------------------------------------------- /dist/1.b2dd7476.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/1.b2dd7476.jpg -------------------------------------------------------------------------------- /dist/1.da07050c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/1.da07050c.jpg -------------------------------------------------------------------------------- /dist/1.e7864b95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/1.e7864b95.jpg -------------------------------------------------------------------------------- /dist/10.03974b57.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/10.03974b57.jpg -------------------------------------------------------------------------------- /dist/10.4f66b9bf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/10.4f66b9bf.jpg -------------------------------------------------------------------------------- /dist/10.821b07c9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/10.821b07c9.jpg -------------------------------------------------------------------------------- /dist/10.ba0c70ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/10.ba0c70ca.jpg -------------------------------------------------------------------------------- /dist/10.e7aba2b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/10.e7aba2b1.jpg -------------------------------------------------------------------------------- /dist/11.1016e8dc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/11.1016e8dc.jpg -------------------------------------------------------------------------------- /dist/11.1201dde3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/11.1201dde3.jpg -------------------------------------------------------------------------------- /dist/11.bc61a1e3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/11.bc61a1e3.jpg -------------------------------------------------------------------------------- /dist/11.e51eb489.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/11.e51eb489.jpg -------------------------------------------------------------------------------- /dist/11.e75a941d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/11.e75a941d.jpg -------------------------------------------------------------------------------- /dist/12.0aa60765.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/12.0aa60765.jpg -------------------------------------------------------------------------------- /dist/12.4061d1aa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/12.4061d1aa.jpg -------------------------------------------------------------------------------- /dist/12.60b51b29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/12.60b51b29.jpg -------------------------------------------------------------------------------- /dist/12.aac53079.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/12.aac53079.jpg -------------------------------------------------------------------------------- /dist/12.d01438d5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/12.d01438d5.jpg -------------------------------------------------------------------------------- /dist/13.1bbeab4e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/13.1bbeab4e.jpg -------------------------------------------------------------------------------- /dist/13.539c169f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/13.539c169f.jpg -------------------------------------------------------------------------------- /dist/13.8a7d35cc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/13.8a7d35cc.jpg -------------------------------------------------------------------------------- /dist/13.8f6cb021.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/13.8f6cb021.jpg -------------------------------------------------------------------------------- /dist/13.a8b9e252.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/13.a8b9e252.jpg -------------------------------------------------------------------------------- /dist/14.4893af22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/14.4893af22.jpg -------------------------------------------------------------------------------- /dist/14.bfa405e1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/14.bfa405e1.jpg -------------------------------------------------------------------------------- /dist/14.e53accbf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/14.e53accbf.jpg -------------------------------------------------------------------------------- /dist/14.e7006644.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/14.e7006644.jpg -------------------------------------------------------------------------------- /dist/14.fab38393.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/14.fab38393.jpg -------------------------------------------------------------------------------- /dist/15.4698baa6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/15.4698baa6.jpg -------------------------------------------------------------------------------- /dist/15.476bebe4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/15.476bebe4.jpg -------------------------------------------------------------------------------- /dist/15.4aca273e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/15.4aca273e.jpg -------------------------------------------------------------------------------- /dist/15.73adc2fc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/15.73adc2fc.jpg -------------------------------------------------------------------------------- /dist/15.cfb90561.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/15.cfb90561.jpg -------------------------------------------------------------------------------- /dist/16.25da4b09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/16.25da4b09.jpg -------------------------------------------------------------------------------- /dist/16.a7efd02b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/16.a7efd02b.jpg -------------------------------------------------------------------------------- /dist/16.bf2e6aed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/16.bf2e6aed.jpg -------------------------------------------------------------------------------- /dist/16.bfa6457c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/16.bfa6457c.jpg -------------------------------------------------------------------------------- /dist/16.e318dd5a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/16.e318dd5a.jpg -------------------------------------------------------------------------------- /dist/17.389c5b13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/17.389c5b13.jpg -------------------------------------------------------------------------------- /dist/17.71510293.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/17.71510293.jpg -------------------------------------------------------------------------------- /dist/17.79dee7e7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/17.79dee7e7.jpg -------------------------------------------------------------------------------- /dist/17.86f96a6e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/17.86f96a6e.jpg -------------------------------------------------------------------------------- /dist/17.9b83f4dd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/17.9b83f4dd.jpg -------------------------------------------------------------------------------- /dist/18.34ee15ce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/18.34ee15ce.jpg -------------------------------------------------------------------------------- /dist/18.87b08370.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/18.87b08370.jpg -------------------------------------------------------------------------------- /dist/18.8ad6a6a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/18.8ad6a6a5.jpg -------------------------------------------------------------------------------- /dist/18.a47fa7a9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/18.a47fa7a9.jpg -------------------------------------------------------------------------------- /dist/18.c5d0ab34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/18.c5d0ab34.jpg -------------------------------------------------------------------------------- /dist/19.5373093f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/19.5373093f.jpg -------------------------------------------------------------------------------- /dist/19.70099d5f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/19.70099d5f.jpg -------------------------------------------------------------------------------- /dist/19.8091b01d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/19.8091b01d.jpg -------------------------------------------------------------------------------- /dist/19.c6d339c0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/19.c6d339c0.jpg -------------------------------------------------------------------------------- /dist/19.d34b3515.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/19.d34b3515.jpg -------------------------------------------------------------------------------- /dist/2.40f30460.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/2.40f30460.jpg -------------------------------------------------------------------------------- /dist/2.56d2adb9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/2.56d2adb9.jpg -------------------------------------------------------------------------------- /dist/2.c629256c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/2.c629256c.jpg -------------------------------------------------------------------------------- /dist/2.c8c223d9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/2.c8c223d9.jpg -------------------------------------------------------------------------------- /dist/2.dd89043e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/2.dd89043e.jpg -------------------------------------------------------------------------------- /dist/20.0917d8dc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/20.0917d8dc.jpg -------------------------------------------------------------------------------- /dist/20.5528d5b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/20.5528d5b7.jpg -------------------------------------------------------------------------------- /dist/20.79785ea9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/20.79785ea9.jpg -------------------------------------------------------------------------------- /dist/20.aa242cb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/20.aa242cb6.jpg -------------------------------------------------------------------------------- /dist/20.eb05c89d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/20.eb05c89d.jpg -------------------------------------------------------------------------------- /dist/3.1e79277a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/3.1e79277a.jpg -------------------------------------------------------------------------------- /dist/3.449799ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/3.449799ca.jpg -------------------------------------------------------------------------------- /dist/3.4b150b5c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/3.4b150b5c.jpg -------------------------------------------------------------------------------- /dist/3.bc341edf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/3.bc341edf.jpg -------------------------------------------------------------------------------- /dist/3.ecfa820e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/3.ecfa820e.jpg -------------------------------------------------------------------------------- /dist/4.00c00e57.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/4.00c00e57.jpg -------------------------------------------------------------------------------- /dist/4.206ad742.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/4.206ad742.jpg -------------------------------------------------------------------------------- /dist/4.500b54f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/4.500b54f2.jpg -------------------------------------------------------------------------------- /dist/4.6e841dd2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/4.6e841dd2.jpg -------------------------------------------------------------------------------- /dist/4.8ed29d64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/4.8ed29d64.jpg -------------------------------------------------------------------------------- /dist/5.208189fa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/5.208189fa.jpg -------------------------------------------------------------------------------- /dist/5.2667ae3b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/5.2667ae3b.jpg -------------------------------------------------------------------------------- /dist/5.296d34a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/5.296d34a5.jpg -------------------------------------------------------------------------------- /dist/5.72557cf0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/5.72557cf0.jpg -------------------------------------------------------------------------------- /dist/5.7795c51e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/5.7795c51e.jpg -------------------------------------------------------------------------------- /dist/6.3ade7d4e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/6.3ade7d4e.jpg -------------------------------------------------------------------------------- /dist/6.aa64fc47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/6.aa64fc47.jpg -------------------------------------------------------------------------------- /dist/6.ac3cd742.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/6.ac3cd742.jpg -------------------------------------------------------------------------------- /dist/6.bd253403.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/6.bd253403.jpg -------------------------------------------------------------------------------- /dist/6.dae49e4f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/6.dae49e4f.jpg -------------------------------------------------------------------------------- /dist/7.0a1756e3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/7.0a1756e3.jpg -------------------------------------------------------------------------------- /dist/7.4183a781.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/7.4183a781.jpg -------------------------------------------------------------------------------- /dist/7.46abac3f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/7.46abac3f.jpg -------------------------------------------------------------------------------- /dist/7.5ac05771.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/7.5ac05771.jpg -------------------------------------------------------------------------------- /dist/7.92c49dce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/7.92c49dce.jpg -------------------------------------------------------------------------------- /dist/8.029c7dba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/8.029c7dba.jpg -------------------------------------------------------------------------------- /dist/8.2c69e487.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/8.2c69e487.jpg -------------------------------------------------------------------------------- /dist/8.65c0cc1f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/8.65c0cc1f.jpg -------------------------------------------------------------------------------- /dist/8.698e0dbd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/8.698e0dbd.jpg -------------------------------------------------------------------------------- /dist/8.94720f30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/8.94720f30.jpg -------------------------------------------------------------------------------- /dist/9.022cbb30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/9.022cbb30.jpg -------------------------------------------------------------------------------- /dist/9.1331c02a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/9.1331c02a.jpg -------------------------------------------------------------------------------- /dist/9.16738e2f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/9.16738e2f.jpg -------------------------------------------------------------------------------- /dist/9.a23c1629.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/9.a23c1629.jpg -------------------------------------------------------------------------------- /dist/9.c1ab683f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/9.c1ab683f.jpg -------------------------------------------------------------------------------- /dist/base.d0d64955.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 12px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-frame-bg: #ded7b3; 14 | --color-text: #000; 15 | --color-bg: #ece7ce; 16 | --color-link: #ff5200; 17 | --color-link-hover: #000; 18 | --color-menu: #3a3005; 19 | --color-menu-hover: #ff5200; 20 | --color-menu-deco: #000; 21 | color: var(--color-text); 22 | background-color: var(--color-bg); 23 | --cursor-stroke: none; 24 | --cursor-fill: #0aa240; 25 | --cursor-stroke-width: 1px; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | font-family: wedding-gothic-atf, sans-serif; 29 | font-weight: 600; 30 | } 31 | 32 | /* Page Loader */ 33 | .js .loading::before, 34 | .js .loading::after { 35 | content: ''; 36 | position: fixed; 37 | z-index: 1000; 38 | } 39 | 40 | .js .loading::before { 41 | top: 0; 42 | left: 0; 43 | width: 100%; 44 | height: 100%; 45 | background: var(--color-bg); 46 | } 47 | 48 | .js .loading::after { 49 | top: 50%; 50 | left: 50%; 51 | width: 60px; 52 | height: 60px; 53 | margin: -30px 0 0 -30px; 54 | opacity: 0.4; 55 | background: var(--color-link); 56 | animation: loaderAnim 0.7s linear infinite alternate forwards; 57 | 58 | } 59 | 60 | @keyframes loaderAnim { 61 | to { 62 | opacity: 1; 63 | transform: scale3d(0.5,0.5,1); 64 | } 65 | } 66 | 67 | a { 68 | text-decoration: none; 69 | color: var(--color-link); 70 | outline: none; 71 | cursor: pointer; 72 | } 73 | 74 | a:hover, 75 | a:focus { 76 | color: var(--color-link-hover); 77 | outline: none; 78 | } 79 | 80 | .frame { 81 | position: relative; 82 | padding: 1rem 1.5rem; 83 | width: 100%; 84 | display: flex; 85 | text-transform: uppercase; 86 | z-index: 1000; 87 | background: var(--color-frame-bg); 88 | } 89 | 90 | .frame__title { 91 | font-size: 1rem; 92 | margin: 0; 93 | font-weight: 600; 94 | } 95 | 96 | .frame__links, .frame__demos, .frame__demos { 97 | margin: 0.5rem 0; 98 | } 99 | 100 | .frame__demos a { 101 | border-bottom: 1px solid currentColor; 102 | transition: 0.2s border-color; 103 | } 104 | 105 | .frame__demos a:hover, 106 | .frame__demos a:focus { 107 | border-color: transparent; 108 | } 109 | 110 | .frame__links a:not(:last-child), 111 | .frame__demos a:not(:last-child) { 112 | margin-right: 1rem; 113 | } 114 | 115 | a.frame__demo--current { 116 | border-color: transparent; 117 | color: var(--color-text); 118 | } 119 | 120 | .menu { 121 | padding: 5rem 0 40vh 0; 122 | position: relative; 123 | display: grid; 124 | -webkit-touch-callout: none; 125 | -webkit-user-select: none; 126 | -moz-user-select: none; 127 | -ms-user-select: none; 128 | user-select: none; 129 | counter-reset: menucounter; 130 | } 131 | 132 | .menu__item { 133 | justify-content: start; 134 | position: relative; 135 | display: grid; 136 | width: 100%; 137 | grid-template-areas: 'counter text'; 138 | grid-template-columns: 3rem auto; 139 | grid-template-rows: auto; 140 | padding: 0.5rem 1rem; 141 | } 142 | 143 | .menu__item::before { 144 | text-align: right; 145 | grid-area: counter; 146 | align-self: start; 147 | justify-self: end; 148 | counter-increment: menucounter; 149 | content: counters(menucounter, ".", decimal-leading-zero); 150 | color: var(--color-menu-deco); 151 | opacity: 0; 152 | font-family: wedding-gothic-atf, sans-serif; 153 | font-weight: 100; 154 | line-height: 1; 155 | padding-right: 0.5rem; 156 | display: grid; 157 | place-items: center; 158 | font-size: clamp(1.5rem, 5vw, 4rem); 159 | transform: translateX(1rem); 160 | transition: transform 0.3s, opacity 0.3s; 161 | } 162 | 163 | .menu__item:hover::before { 164 | color: var(--color-menu-deco); 165 | opacity: 1; 166 | transform: translateX(0); 167 | } 168 | 169 | .menu__item-text { 170 | grid-area: text; 171 | position: relative; 172 | cursor: pointer; 173 | display: block; 174 | overflow: hidden; 175 | line-height: 1; 176 | height: 100%; 177 | } 178 | 179 | .menu__item-textinner { 180 | font-size: clamp(3rem, 7vw, 5rem); 181 | width: 100%; 182 | height: 100%; 183 | position: relative; 184 | display: block; 185 | font-family: ambroise-firmin-std, serif; 186 | font-weight: 300; 187 | text-transform: uppercase; 188 | white-space: nowrap; 189 | color: var(--color-menu); 190 | } 191 | 192 | .js .menu__item-textinner { 193 | transform: translateY(100%); 194 | } 195 | 196 | .menu__item:hover .menu__item-textinner { 197 | color: var(--color-menu-hover); 198 | } 199 | 200 | .menu__item-sub { 201 | grid-area: sub; 202 | display: none; 203 | font-size: 10px; 204 | text-transform: uppercase; 205 | font-family: wedding-gothic-atf, sans-serif; 206 | font-weight: 600; 207 | white-space: nowrap; 208 | position: relative; 209 | width: 100%; 210 | line-height: 1; 211 | padding: 0 0 0.5rem 0; 212 | color: var(--color-menu-deco); 213 | opacity: 0; 214 | margin-left: auto; 215 | transform: translateX(-1rem); 216 | transition: transform 0.3s, opacity 0.3s; 217 | } 218 | 219 | .menu__item:hover .menu__item-sub { 220 | color: var(--color-menu-deco); 221 | opacity: 1; 222 | transform: translateX(0); 223 | } 224 | 225 | .hover-reveal { 226 | position: absolute; 227 | z-index: -1; 228 | width: 300px; 229 | height: 400px; 230 | top: 0; 231 | left: 0; 232 | pointer-events: none; 233 | opacity: 0; 234 | will-change: transform, filter; 235 | } 236 | 237 | .hover-reveal__inner { 238 | overflow: hidden; 239 | } 240 | 241 | .hover-reveal__inner, 242 | .hover-reveal__img { 243 | width: 100%; 244 | height: 100%; 245 | position: relative; 246 | } 247 | 248 | .hover-reveal__img { 249 | background-size: cover; 250 | background-position: 50% 50%; 251 | } 252 | 253 | .cursor { 254 | display: none; 255 | } 256 | 257 | .credits { 258 | align-self: flex-start; 259 | padding: 5rem 0 0 0; 260 | } 261 | 262 | .credits a { 263 | text-decoration: underline; 264 | } 265 | 266 | @media screen and (min-width: 53em) { 267 | .frame { 268 | pointer-events: none; 269 | background: none; 270 | } 271 | .frame__title-wrap { 272 | pointer-events: auto; 273 | } 274 | .frame__demos { 275 | margin: 0.5rem 0 0; 276 | justify-self: start; 277 | } 278 | .frame__demos a { 279 | margin-right: 0.5rem; 280 | } 281 | .menu__item { 282 | grid-template-areas: 283 | '. counter text . .' 284 | '. . sub . .'; 285 | grid-template-columns: 1fr 7rem auto 7rem 1fr; 286 | } 287 | .menu__item-sub { 288 | display: block; 289 | } 290 | } 291 | 292 | @media (any-pointer: fine) { 293 | .cursor { 294 | position: fixed; 295 | top: 0; 296 | left: 0; 297 | display: block; 298 | pointer-events: none; 299 | } 300 | .cursor__inner { 301 | fill: var(--cursor-fill); 302 | stroke: var(--cursor-stroke); 303 | stroke-width: var(--cursor-stroke-width); 304 | opacity: 0.7; 305 | } 306 | .credits { 307 | padding-left: 25vw; 308 | } 309 | } 310 | 311 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 312 | html.has-scroll-smooth { 313 | overflow: hidden; 314 | } 315 | 316 | html.has-scroll-dragging { 317 | -webkit-user-select: none; 318 | -moz-user-select: none; 319 | -ms-user-select: none; 320 | user-select: none; 321 | } 322 | 323 | .has-scroll-smooth body { 324 | overflow: hidden; 325 | } 326 | 327 | .has-scroll-smooth [data-scroll-container] { 328 | min-height: 100vh; 329 | } 330 | 331 | .c-scrollbar { 332 | position: absolute; 333 | right: 0; 334 | top: 0; 335 | width: 11px; 336 | height: 100vh; 337 | transform-origin: center right; 338 | transition: transform 0.3s, opacity 0.3s; 339 | opacity: 0; 340 | } 341 | .c-scrollbar:hover { 342 | transform: scaleX(1.45); 343 | } 344 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 345 | opacity: 1; 346 | } 347 | 348 | .c-scrollbar_thumb { 349 | position: absolute; 350 | top: 0; 351 | right: 0; 352 | background-color: black; 353 | opacity: 0.5; 354 | width: 7px; 355 | border-radius: 10px; 356 | margin: 2px; 357 | cursor: -webkit-grab; 358 | cursor: grab; 359 | } 360 | .has-scroll-dragging .c-scrollbar_thumb { 361 | cursor: -webkit-grabbing; 362 | cursor: grabbing; 363 | } -------------------------------------------------------------------------------- /dist/base.dcef311f.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 13px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-frame-bg: #fff; 14 | --color-text: #ce1f4c; 15 | --color-bg: #deca8c; 16 | --color-link: #000000; 17 | --color-link-hover: #fff; 18 | --color-menu: #fff; 19 | --color-menu-hover: #ce1f4c; 20 | --color-menu-deco: #ffffff; 21 | color: var(--color-text); 22 | background-color: var(--color-bg); 23 | --cursor-stroke: none; 24 | --cursor-fill: #d5545e; 25 | --cursor-stroke-width: 1px; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 29 | } 30 | 31 | /* Page Loader */ 32 | .js .loading::before, 33 | .js .loading::after { 34 | content: ''; 35 | position: fixed; 36 | z-index: 1000; 37 | } 38 | 39 | .js .loading::before { 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: var(--color-bg); 45 | } 46 | 47 | .js .loading::after { 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | opacity: 0.4; 54 | background: var(--color-link); 55 | animation: loaderAnim 0.7s linear infinite alternate forwards; 56 | 57 | } 58 | 59 | @keyframes loaderAnim { 60 | to { 61 | opacity: 1; 62 | transform: scale3d(0.5,0.5,1); 63 | } 64 | } 65 | 66 | a { 67 | text-decoration: none; 68 | color: var(--color-link); 69 | outline: none; 70 | cursor: pointer; 71 | } 72 | 73 | a:hover, 74 | a:focus { 75 | color: var(--color-link-hover); 76 | outline: none; 77 | } 78 | 79 | .frame { 80 | position: relative; 81 | padding: 1rem 1.5rem; 82 | width: 100%; 83 | display: flex; 84 | text-transform: uppercase; 85 | z-index: 1000; 86 | background: var(--color-frame-bg); 87 | } 88 | 89 | .frame__title { 90 | font-size: 1rem; 91 | margin: 0; 92 | font-weight: 400; 93 | } 94 | 95 | .frame__links, .frame__demos, .frame__demos { 96 | margin: 0.5rem 0; 97 | } 98 | 99 | .frame__demos a { 100 | border-bottom: 1px solid currentColor; 101 | transition: 0.2s border-color; 102 | } 103 | 104 | .frame__demos a:hover, 105 | .frame__demos a:focus { 106 | border-color: transparent; 107 | } 108 | 109 | .frame__links a:not(:last-child), 110 | .frame__demos a:not(:last-child) { 111 | margin-right: 1rem; 112 | } 113 | 114 | a.frame__demo--current { 115 | border-color: transparent; 116 | color: var(--color-text); 117 | } 118 | 119 | .menu { 120 | padding: 5rem 0 40vh 0; 121 | width: 90vw; 122 | position: relative; 123 | display: flex; 124 | flex-direction: column; 125 | text-align: right; 126 | -webkit-touch-callout: none; 127 | -webkit-user-select: none; 128 | -moz-user-select: none; 129 | -ms-user-select: none; 130 | user-select: none; 131 | counter-reset: menucounter; 132 | } 133 | 134 | .menu__item { 135 | flex: none; 136 | display: flex; 137 | justify-content: flex-end; 138 | position: relative; 139 | padding-left: 5rem; 140 | } 141 | 142 | .menu__item::before { 143 | counter-increment: menucounter; 144 | content: counters(menucounter, ".", decimal-leading-zero); 145 | position: absolute; 146 | left: 0; 147 | color: var(--color-menu-deco); 148 | border-left: 3px solid currentColor; 149 | top: 20%; 150 | height: 60%; 151 | padding-left: 1rem; 152 | display: flex; 153 | align-items: center; 154 | line-height: 1; 155 | font-weight: bold; 156 | opacity: 0; 157 | transform: translateX(-1rem); 158 | transition: transform 0.3s, opacity 0.3s; 159 | } 160 | 161 | .menu__item:hover::before { 162 | color: var(--color-menu-deco); 163 | opacity: 1; 164 | transform: translateX(0); 165 | } 166 | 167 | .menu__item-text { 168 | position: relative; 169 | cursor: pointer; 170 | display: block; 171 | overflow: hidden; 172 | } 173 | 174 | .menu__item-textinner { 175 | display: block; 176 | font-family: moret, serif; 177 | font-weight: 300; 178 | white-space: nowrap; 179 | color: var(--color-menu); 180 | font-size: clamp(2rem, 7vw, 6rem); 181 | } 182 | 183 | .js .menu__item-textinner { 184 | transform: translateY(100%); 185 | } 186 | 187 | .menu__item:hover .menu__item-textinner { 188 | color: var(--color-menu-hover); 189 | } 190 | 191 | .menu__item-sub { 192 | display: none; 193 | text-transform: uppercase; 194 | font-weight: bold; 195 | white-space: nowrap; 196 | align-items: center; 197 | position: relative; 198 | margin-left: 2rem; 199 | padding-left: 3rem; 200 | color: var(--color-menu-deco); 201 | opacity: 0; 202 | transform: translateX(-1rem); 203 | transition: transform 0.3s, opacity 0.3s; 204 | mix-blend-mode: difference; 205 | } 206 | 207 | .menu__item:hover .menu__item-sub { 208 | color: var(--color-menu-deco); 209 | opacity: 1; 210 | transform: translateX(0); 211 | } 212 | 213 | .menu__item-sub::before { 214 | content: ''; 215 | position: absolute; 216 | left: 0; 217 | top: 15%; 218 | width: 1px; 219 | height: 70%; 220 | background: currentColor; 221 | transform-origin: 0 100%; 222 | transform: rotate(22.5deg) scale3d(1,0,1); 223 | transition: transform 0.3s; 224 | } 225 | 226 | .menu__item:hover .menu__item-sub::before { 227 | transform: rotate(22.5deg) scale3d(1,1,1); 228 | } 229 | 230 | .hover-reveal { 231 | position: absolute; 232 | z-index: -1; 233 | width: 220px; 234 | height: 280px; 235 | top: 0; 236 | left: 0; 237 | pointer-events: none; 238 | opacity: 0; 239 | will-change: transform, filter; 240 | } 241 | 242 | .hover-reveal__img { 243 | width: 100%; 244 | height: 100%; 245 | } 246 | 247 | .hover-reveal__img { 248 | background-size: cover; 249 | background-position: 50% 50%; 250 | } 251 | 252 | .cursor { 253 | display: none; 254 | } 255 | 256 | .credits { 257 | align-self: flex-start; 258 | padding: 5rem 0 0 0; 259 | } 260 | 261 | .credits a { 262 | text-decoration: underline; 263 | } 264 | 265 | @media screen and (min-width: 53em) { 266 | .frame { 267 | background: none; 268 | pointer-events: none; 269 | } 270 | .frame__title-wrap { 271 | pointer-events: auto; 272 | } 273 | .frame__demos { 274 | margin: 0.5rem 0 0; 275 | justify-self: start; 276 | } 277 | .frame__demos a { 278 | margin-right: 0.5rem; 279 | } 280 | .menu__item { 281 | padding-left: 25vw; 282 | } 283 | .menu__item-sub { 284 | display: flex; 285 | } 286 | } 287 | 288 | @media (any-pointer: fine) { 289 | .cursor { 290 | position: fixed; 291 | top: 0; 292 | left: 0; 293 | display: block; 294 | pointer-events: none; 295 | } 296 | .cursor__inner { 297 | fill: var(--cursor-fill); 298 | stroke: var(--cursor-stroke); 299 | stroke-width: var(--cursor-stroke-width); 300 | opacity: 0.7; 301 | } 302 | .credits { 303 | padding-left: 25vw; 304 | } 305 | } 306 | 307 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 308 | html.has-scroll-smooth { 309 | overflow: hidden; 310 | } 311 | 312 | html.has-scroll-dragging { 313 | -webkit-user-select: none; 314 | -moz-user-select: none; 315 | -ms-user-select: none; 316 | user-select: none; 317 | } 318 | 319 | .has-scroll-smooth body { 320 | overflow: hidden; 321 | } 322 | 323 | .has-scroll-smooth [data-scroll-container] { 324 | min-height: 100vh; 325 | } 326 | 327 | .c-scrollbar { 328 | position: absolute; 329 | right: 0; 330 | top: 0; 331 | width: 11px; 332 | height: 100vh; 333 | transform-origin: center right; 334 | transition: transform 0.3s, opacity 0.3s; 335 | opacity: 0; 336 | } 337 | .c-scrollbar:hover { 338 | transform: scaleX(1.45); 339 | } 340 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 341 | opacity: 1; 342 | } 343 | 344 | .c-scrollbar_thumb { 345 | position: absolute; 346 | top: 0; 347 | right: 0; 348 | background-color: black; 349 | opacity: 0.5; 350 | width: 7px; 351 | border-radius: 10px; 352 | margin: 2px; 353 | cursor: -webkit-grab; 354 | cursor: grab; 355 | } 356 | .has-scroll-dragging .c-scrollbar_thumb { 357 | cursor: -webkit-grabbing; 358 | cursor: grabbing; 359 | } -------------------------------------------------------------------------------- /dist/base.e2973d14.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 13px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-frame-bg: #201f1f; 14 | --color-text: #f70d0d; 15 | --color-bg: #000; 16 | --color-link: #969696; 17 | --color-link-hover: #fff; 18 | --color-menu: #fff; 19 | --color-menu-hover: #18d1ea; 20 | --color-menu-deco: #ffffff; 21 | color: var(--color-text); 22 | background-color: var(--color-bg); 23 | --cursor-stroke: none; 24 | --cursor-fill: #ff0000; 25 | --cursor-stroke-width: 1px; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 29 | } 30 | 31 | /* Page Loader */ 32 | .js .loading::before, 33 | .js .loading::after { 34 | content: ''; 35 | position: fixed; 36 | z-index: 1000; 37 | } 38 | 39 | .js .loading::before { 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: var(--color-bg); 45 | } 46 | 47 | .js .loading::after { 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | opacity: 0.4; 54 | background: var(--color-link); 55 | animation: loaderAnim 0.7s linear infinite alternate forwards; 56 | 57 | } 58 | 59 | @keyframes loaderAnim { 60 | to { 61 | opacity: 1; 62 | transform: scale3d(0.5,0.5,1); 63 | } 64 | } 65 | 66 | a { 67 | text-decoration: none; 68 | color: var(--color-link); 69 | outline: none; 70 | cursor: pointer; 71 | } 72 | 73 | a:hover, 74 | a:focus { 75 | color: var(--color-link-hover); 76 | outline: none; 77 | } 78 | 79 | .frame { 80 | position: relative; 81 | padding: 1rem 1.5rem; 82 | width: 100%; 83 | display: flex; 84 | text-transform: uppercase; 85 | z-index: 1000; 86 | background: var(--color-frame-bg); 87 | } 88 | 89 | .frame__title { 90 | font-size: 1rem; 91 | margin: 0; 92 | font-weight: 400; 93 | } 94 | 95 | .frame__links, .frame__demos, .frame__demos { 96 | margin: 0.5rem 0; 97 | } 98 | 99 | .frame__demos a { 100 | border-bottom: 1px solid currentColor; 101 | transition: 0.2s border-color; 102 | } 103 | 104 | .frame__demos a:hover, 105 | .frame__demos a:focus { 106 | border-color: transparent; 107 | } 108 | 109 | .frame__links a:not(:last-child), 110 | .frame__demos a:not(:last-child) { 111 | margin-right: 1rem; 112 | } 113 | 114 | a.frame__demo--current { 115 | border-color: transparent; 116 | color: var(--color-text); 117 | } 118 | 119 | .menu { 120 | padding: 5rem 0 40vh 0; 121 | position: relative; 122 | display: flex; 123 | align-items: flex-end; 124 | flex-direction: column; 125 | text-align: right; 126 | -webkit-touch-callout: none; 127 | -webkit-user-select: none; 128 | -moz-user-select: none; 129 | -ms-user-select: none; 130 | user-select: none; 131 | counter-reset: menucounter; 132 | } 133 | 134 | .menu__item { 135 | flex: none; 136 | display: flex; 137 | justify-content: flex-end; 138 | position: relative; 139 | padding: 0 15vw; 140 | } 141 | 142 | .menu__item::before { 143 | counter-increment: menucounter; 144 | content: counters(menucounter, ".", decimal-leading-zero); 145 | position: absolute; 146 | left: calc(15vw - 2rem); 147 | color: var(--color-menu-deco); 148 | top: 0%; 149 | height: 60%; 150 | display: flex; 151 | align-items: center; 152 | line-height: 1; 153 | font-weight: bold; 154 | opacity: 0; 155 | transform: translateX(-1rem); 156 | transition: transform 0.3s, opacity 0.3s; 157 | } 158 | 159 | .menu__item:hover::before { 160 | color: var(--color-menu-deco); 161 | opacity: 1; 162 | transform: translateX(0); 163 | } 164 | 165 | .menu__item-text { 166 | position: relative; 167 | cursor: pointer; 168 | display: block; 169 | overflow: hidden; 170 | line-height: 1; 171 | font-size: clamp(2rem, 6vw, 6rem); 172 | } 173 | 174 | .menu__item-textinner { 175 | display: block; 176 | font-family: tenez, sans-serif; 177 | font-weight: 400; 178 | text-transform: uppercase; 179 | white-space: nowrap; 180 | color: var(--color-menu); 181 | } 182 | 183 | .js .menu__item-textinner { 184 | transform: translateY(100%); 185 | } 186 | 187 | .menu__item:hover .menu__item-textinner { 188 | color: var(--color-menu-hover); 189 | } 190 | 191 | .menu__item-sub { 192 | display: none; 193 | text-transform: uppercase; 194 | font-weight: bold; 195 | white-space: nowrap; 196 | align-items: center; 197 | position: relative; 198 | margin-left: 2rem; 199 | padding-left: 3rem; 200 | color: var(--color-menu-deco); 201 | opacity: 0; 202 | transform: translateX(-1rem); 203 | transition: transform 0.3s, opacity 0.3s; 204 | mix-blend-mode: difference; 205 | } 206 | 207 | .menu__item:hover .menu__item-sub { 208 | color: var(--color-menu-deco); 209 | opacity: 1; 210 | transform: translateX(0); 211 | } 212 | 213 | .menu__item-sub::before { 214 | content: ''; 215 | position: absolute; 216 | left: 0; 217 | top: 15%; 218 | width: 1px; 219 | height: 70%; 220 | background: currentColor; 221 | transform-origin: 0 100%; 222 | transform: rotate(22.5deg) scale3d(1,0,1); 223 | transition: transform 0.3s; 224 | } 225 | 226 | .menu__item:hover .menu__item-sub::before { 227 | transform: rotate(22.5deg) scale3d(1,1,1); 228 | } 229 | 230 | .hover-reveal { 231 | position: absolute; 232 | z-index: -1; 233 | width: 200px; 234 | height: 280px; 235 | top: 0; 236 | left: 0; 237 | pointer-events: none; 238 | opacity: 0; 239 | will-change: transform, filter; 240 | } 241 | 242 | .hover-reveal__inner { 243 | overflow: hidden; 244 | } 245 | 246 | .hover-reveal__inner, 247 | .hover-reveal__img { 248 | width: 100%; 249 | height: 100%; 250 | position: relative; 251 | } 252 | 253 | .hover-reveal__img { 254 | background-size: cover; 255 | background-position: 50% 50%; 256 | } 257 | 258 | .cursor { 259 | display: none; 260 | } 261 | 262 | .credits { 263 | align-self: flex-start; 264 | padding: 5rem 0 0 0; 265 | } 266 | 267 | .credits a { 268 | text-decoration: underline; 269 | } 270 | 271 | @media screen and (min-width: 53em) { 272 | .frame { 273 | pointer-events: none; 274 | background: none; 275 | } 276 | .frame__title-wrap { 277 | pointer-events: auto; 278 | } 279 | .frame__demos { 280 | margin: 0.5rem 0 0; 281 | justify-self: start; 282 | } 283 | .frame__demos a { 284 | margin-right: 0.5rem; 285 | } 286 | .menu__item-sub { 287 | display: flex; 288 | } 289 | } 290 | 291 | @media (any-pointer: fine) { 292 | .cursor { 293 | position: fixed; 294 | top: 0; 295 | left: 0; 296 | display: block; 297 | pointer-events: none; 298 | } 299 | .cursor__inner { 300 | fill: var(--cursor-fill); 301 | stroke: var(--cursor-stroke); 302 | stroke-width: var(--cursor-stroke-width); 303 | opacity: 0.7; 304 | } 305 | .credits { 306 | padding-left: 25vw; 307 | } 308 | } 309 | 310 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 311 | html.has-scroll-smooth { 312 | overflow: hidden; 313 | } 314 | 315 | html.has-scroll-dragging { 316 | -webkit-user-select: none; 317 | -moz-user-select: none; 318 | -ms-user-select: none; 319 | user-select: none; 320 | } 321 | 322 | .has-scroll-smooth body { 323 | overflow: hidden; 324 | } 325 | 326 | .has-scroll-smooth [data-scroll-container] { 327 | min-height: 100vh; 328 | } 329 | 330 | .c-scrollbar { 331 | position: absolute; 332 | right: 0; 333 | top: 0; 334 | width: 11px; 335 | height: 100vh; 336 | transform-origin: center right; 337 | transition: transform 0.3s, opacity 0.3s; 338 | opacity: 0; 339 | } 340 | .c-scrollbar:hover { 341 | transform: scaleX(1.45); 342 | } 343 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 344 | opacity: 1; 345 | } 346 | 347 | .c-scrollbar_thumb { 348 | position: absolute; 349 | top: 0; 350 | right: 0; 351 | background-color: black; 352 | opacity: 0.5; 353 | width: 7px; 354 | border-radius: 10px; 355 | margin: 2px; 356 | cursor: -webkit-grab; 357 | cursor: grab; 358 | } 359 | .has-scroll-dragging .c-scrollbar_thumb { 360 | cursor: -webkit-grabbing; 361 | cursor: grabbing; 362 | } -------------------------------------------------------------------------------- /dist/favicon.26242483.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/favicon.26242483.ico -------------------------------------------------------------------------------- /dist/img/demo1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/1.jpg -------------------------------------------------------------------------------- /dist/img/demo1/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/10.jpg -------------------------------------------------------------------------------- /dist/img/demo1/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/11.jpg -------------------------------------------------------------------------------- /dist/img/demo1/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/12.jpg -------------------------------------------------------------------------------- /dist/img/demo1/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/13.jpg -------------------------------------------------------------------------------- /dist/img/demo1/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/14.jpg -------------------------------------------------------------------------------- /dist/img/demo1/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/15.jpg -------------------------------------------------------------------------------- /dist/img/demo1/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/16.jpg -------------------------------------------------------------------------------- /dist/img/demo1/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/17.jpg -------------------------------------------------------------------------------- /dist/img/demo1/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/18.jpg -------------------------------------------------------------------------------- /dist/img/demo1/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/19.jpg -------------------------------------------------------------------------------- /dist/img/demo1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/2.jpg -------------------------------------------------------------------------------- /dist/img/demo1/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/20.jpg -------------------------------------------------------------------------------- /dist/img/demo1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/3.jpg -------------------------------------------------------------------------------- /dist/img/demo1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/4.jpg -------------------------------------------------------------------------------- /dist/img/demo1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/5.jpg -------------------------------------------------------------------------------- /dist/img/demo1/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/6.jpg -------------------------------------------------------------------------------- /dist/img/demo1/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/7.jpg -------------------------------------------------------------------------------- /dist/img/demo1/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/8.jpg -------------------------------------------------------------------------------- /dist/img/demo1/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo1/9.jpg -------------------------------------------------------------------------------- /dist/img/demo2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/1.jpg -------------------------------------------------------------------------------- /dist/img/demo2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/10.jpg -------------------------------------------------------------------------------- /dist/img/demo2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/11.jpg -------------------------------------------------------------------------------- /dist/img/demo2/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/12.jpg -------------------------------------------------------------------------------- /dist/img/demo2/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/13.jpg -------------------------------------------------------------------------------- /dist/img/demo2/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/14.jpg -------------------------------------------------------------------------------- /dist/img/demo2/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/15.jpg -------------------------------------------------------------------------------- /dist/img/demo2/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/16.jpg -------------------------------------------------------------------------------- /dist/img/demo2/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/17.jpg -------------------------------------------------------------------------------- /dist/img/demo2/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/18.jpg -------------------------------------------------------------------------------- /dist/img/demo2/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/19.jpg -------------------------------------------------------------------------------- /dist/img/demo2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/2.jpg -------------------------------------------------------------------------------- /dist/img/demo2/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/20.jpg -------------------------------------------------------------------------------- /dist/img/demo2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/3.jpg -------------------------------------------------------------------------------- /dist/img/demo2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/4.jpg -------------------------------------------------------------------------------- /dist/img/demo2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/5.jpg -------------------------------------------------------------------------------- /dist/img/demo2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/6.jpg -------------------------------------------------------------------------------- /dist/img/demo2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/7.jpg -------------------------------------------------------------------------------- /dist/img/demo2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/8.jpg -------------------------------------------------------------------------------- /dist/img/demo2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo2/9.jpg -------------------------------------------------------------------------------- /dist/img/demo3/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/1.jpg -------------------------------------------------------------------------------- /dist/img/demo3/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/10.jpg -------------------------------------------------------------------------------- /dist/img/demo3/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/11.jpg -------------------------------------------------------------------------------- /dist/img/demo3/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/12.jpg -------------------------------------------------------------------------------- /dist/img/demo3/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/13.jpg -------------------------------------------------------------------------------- /dist/img/demo3/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/14.jpg -------------------------------------------------------------------------------- /dist/img/demo3/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/15.jpg -------------------------------------------------------------------------------- /dist/img/demo3/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/16.jpg -------------------------------------------------------------------------------- /dist/img/demo3/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/17.jpg -------------------------------------------------------------------------------- /dist/img/demo3/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/18.jpg -------------------------------------------------------------------------------- /dist/img/demo3/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/19.jpg -------------------------------------------------------------------------------- /dist/img/demo3/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/2.jpg -------------------------------------------------------------------------------- /dist/img/demo3/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/20.jpg -------------------------------------------------------------------------------- /dist/img/demo3/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/3.jpg -------------------------------------------------------------------------------- /dist/img/demo3/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/4.jpg -------------------------------------------------------------------------------- /dist/img/demo3/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/5.jpg -------------------------------------------------------------------------------- /dist/img/demo3/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/6.jpg -------------------------------------------------------------------------------- /dist/img/demo3/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/7.jpg -------------------------------------------------------------------------------- /dist/img/demo3/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/8.jpg -------------------------------------------------------------------------------- /dist/img/demo3/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo3/9.jpg -------------------------------------------------------------------------------- /dist/img/demo4/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/1.jpg -------------------------------------------------------------------------------- /dist/img/demo4/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/10.jpg -------------------------------------------------------------------------------- /dist/img/demo4/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/11.jpg -------------------------------------------------------------------------------- /dist/img/demo4/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/12.jpg -------------------------------------------------------------------------------- /dist/img/demo4/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/13.jpg -------------------------------------------------------------------------------- /dist/img/demo4/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/14.jpg -------------------------------------------------------------------------------- /dist/img/demo4/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/15.jpg -------------------------------------------------------------------------------- /dist/img/demo4/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/16.jpg -------------------------------------------------------------------------------- /dist/img/demo4/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/17.jpg -------------------------------------------------------------------------------- /dist/img/demo4/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/18.jpg -------------------------------------------------------------------------------- /dist/img/demo4/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/19.jpg -------------------------------------------------------------------------------- /dist/img/demo4/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/2.jpg -------------------------------------------------------------------------------- /dist/img/demo4/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/20.jpg -------------------------------------------------------------------------------- /dist/img/demo4/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/3.jpg -------------------------------------------------------------------------------- /dist/img/demo4/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/4.jpg -------------------------------------------------------------------------------- /dist/img/demo4/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/5.jpg -------------------------------------------------------------------------------- /dist/img/demo4/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/6.jpg -------------------------------------------------------------------------------- /dist/img/demo4/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/7.jpg -------------------------------------------------------------------------------- /dist/img/demo4/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/8.jpg -------------------------------------------------------------------------------- /dist/img/demo4/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo4/9.jpg -------------------------------------------------------------------------------- /dist/img/demo5/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/1.jpg -------------------------------------------------------------------------------- /dist/img/demo5/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/10.jpg -------------------------------------------------------------------------------- /dist/img/demo5/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/11.jpg -------------------------------------------------------------------------------- /dist/img/demo5/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/12.jpg -------------------------------------------------------------------------------- /dist/img/demo5/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/13.jpg -------------------------------------------------------------------------------- /dist/img/demo5/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/14.jpg -------------------------------------------------------------------------------- /dist/img/demo5/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/15.jpg -------------------------------------------------------------------------------- /dist/img/demo5/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/16.jpg -------------------------------------------------------------------------------- /dist/img/demo5/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/17.jpg -------------------------------------------------------------------------------- /dist/img/demo5/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/18.jpg -------------------------------------------------------------------------------- /dist/img/demo5/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/19.jpg -------------------------------------------------------------------------------- /dist/img/demo5/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/2.jpg -------------------------------------------------------------------------------- /dist/img/demo5/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/20.jpg -------------------------------------------------------------------------------- /dist/img/demo5/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/3.jpg -------------------------------------------------------------------------------- /dist/img/demo5/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/4.jpg -------------------------------------------------------------------------------- /dist/img/demo5/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/5.jpg -------------------------------------------------------------------------------- /dist/img/demo5/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/6.jpg -------------------------------------------------------------------------------- /dist/img/demo5/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/7.jpg -------------------------------------------------------------------------------- /dist/img/demo5/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/8.jpg -------------------------------------------------------------------------------- /dist/img/demo5/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/dist/img/demo5/9.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 1 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |

Menu Hover Effects

29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | 01 36 | 02 37 | 03 38 | 04 39 | 05 40 |
41 |
42 |
43 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 2 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |

Menu Hover Effects

29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | 01 36 | 02 37 | 03 38 | 04 39 | 05 40 |
41 |
42 |
43 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 3 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |

Menu Hover Effects

29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | 01 36 | 02 37 | 03 38 | 04 39 | 05 40 |
41 |
42 |
43 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /dist/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 4 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |

Menu Hover Effects

29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | 01 36 | 02 37 | 03 38 | 04 39 | 05 40 |
41 |
42 |
43 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /dist/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 5 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 |
26 |
27 |
28 |

Menu Hover Effects

29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | 01 36 | 02 37 | 03 38 | 04 39 | 05 40 |
41 |
42 |
43 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RapidImageHoverMenuEffects", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-minify --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/RapidImageHoverMenuEffects.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "[HOMEPAGE]", 20 | "bugs": { 21 | "url": "https://github.com/codrops/RapidImageHoverMenuEffects/issues" 22 | }, 23 | "dependencies": { 24 | "gsap": "^3.3.4", 25 | "imagesloaded": "^4.1.4", 26 | "locomotive-scroll": "^3.5.4", 27 | "parcel-bundler": "^1.12.4" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/demo2/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 13px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-frame-bg: #201f1f; 14 | --color-text: #f70d0d; 15 | --color-bg: #000; 16 | --color-link: #969696; 17 | --color-link-hover: #fff; 18 | --color-menu: #fff; 19 | --color-menu-hover: #18d1ea; 20 | --color-menu-deco: #ffffff; 21 | color: var(--color-text); 22 | background-color: var(--color-bg); 23 | --cursor-stroke: none; 24 | --cursor-fill: #ff0000; 25 | --cursor-stroke-width: 1px; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 29 | } 30 | 31 | /* Page Loader */ 32 | .js .loading::before, 33 | .js .loading::after { 34 | content: ''; 35 | position: fixed; 36 | z-index: 1000; 37 | } 38 | 39 | .js .loading::before { 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: var(--color-bg); 45 | } 46 | 47 | .js .loading::after { 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | opacity: 0.4; 54 | background: var(--color-link); 55 | animation: loaderAnim 0.7s linear infinite alternate forwards; 56 | 57 | } 58 | 59 | @keyframes loaderAnim { 60 | to { 61 | opacity: 1; 62 | transform: scale3d(0.5,0.5,1); 63 | } 64 | } 65 | 66 | a { 67 | text-decoration: none; 68 | color: var(--color-link); 69 | outline: none; 70 | cursor: pointer; 71 | } 72 | 73 | a:hover, 74 | a:focus { 75 | color: var(--color-link-hover); 76 | outline: none; 77 | } 78 | 79 | .frame { 80 | position: relative; 81 | padding: 1rem 1.5rem; 82 | width: 100%; 83 | display: flex; 84 | text-transform: uppercase; 85 | z-index: 1000; 86 | background: var(--color-frame-bg); 87 | } 88 | 89 | .frame__title { 90 | font-size: 1rem; 91 | margin: 0; 92 | font-weight: 400; 93 | } 94 | 95 | .frame__links, .frame__demos, .frame__demos { 96 | margin: 0.5rem 0; 97 | } 98 | 99 | .frame__demos a { 100 | border-bottom: 1px solid currentColor; 101 | transition: 0.2s border-color; 102 | } 103 | 104 | .frame__demos a:hover, 105 | .frame__demos a:focus { 106 | border-color: transparent; 107 | } 108 | 109 | .frame__links a:not(:last-child), 110 | .frame__demos a:not(:last-child) { 111 | margin-right: 1rem; 112 | } 113 | 114 | a.frame__demo--current { 115 | border-color: transparent; 116 | color: var(--color-text); 117 | } 118 | 119 | .menu { 120 | padding: 5rem 0 40vh 0; 121 | position: relative; 122 | display: flex; 123 | align-items: flex-end; 124 | flex-direction: column; 125 | text-align: right; 126 | -webkit-touch-callout: none; 127 | -webkit-user-select: none; 128 | -moz-user-select: none; 129 | -ms-user-select: none; 130 | user-select: none; 131 | counter-reset: menucounter; 132 | } 133 | 134 | .menu__item { 135 | flex: none; 136 | display: flex; 137 | justify-content: flex-end; 138 | position: relative; 139 | padding: 0 15vw; 140 | } 141 | 142 | .menu__item::before { 143 | counter-increment: menucounter; 144 | content: counters(menucounter, ".", decimal-leading-zero); 145 | position: absolute; 146 | left: calc(15vw - 2rem); 147 | color: var(--color-menu-deco); 148 | top: 0%; 149 | height: 60%; 150 | display: flex; 151 | align-items: center; 152 | line-height: 1; 153 | font-weight: bold; 154 | opacity: 0; 155 | transform: translateX(-1rem); 156 | transition: transform 0.3s, opacity 0.3s; 157 | } 158 | 159 | .menu__item:hover::before { 160 | color: var(--color-menu-deco); 161 | opacity: 1; 162 | transform: translateX(0); 163 | } 164 | 165 | .menu__item-text { 166 | position: relative; 167 | cursor: pointer; 168 | display: block; 169 | overflow: hidden; 170 | line-height: 1; 171 | font-size: clamp(2rem, 6vw, 6rem); 172 | } 173 | 174 | .menu__item-textinner { 175 | display: block; 176 | font-family: tenez, sans-serif; 177 | font-weight: 400; 178 | text-transform: uppercase; 179 | white-space: nowrap; 180 | color: var(--color-menu); 181 | } 182 | 183 | .js .menu__item-textinner { 184 | transform: translateY(100%); 185 | } 186 | 187 | .menu__item:hover .menu__item-textinner { 188 | color: var(--color-menu-hover); 189 | } 190 | 191 | .menu__item-sub { 192 | display: none; 193 | text-transform: uppercase; 194 | font-weight: bold; 195 | white-space: nowrap; 196 | align-items: center; 197 | position: relative; 198 | margin-left: 2rem; 199 | padding-left: 3rem; 200 | color: var(--color-menu-deco); 201 | opacity: 0; 202 | transform: translateX(-1rem); 203 | transition: transform 0.3s, opacity 0.3s; 204 | mix-blend-mode: difference; 205 | } 206 | 207 | .menu__item:hover .menu__item-sub { 208 | color: var(--color-menu-deco); 209 | opacity: 1; 210 | transform: translateX(0); 211 | } 212 | 213 | .menu__item-sub::before { 214 | content: ''; 215 | position: absolute; 216 | left: 0; 217 | top: 15%; 218 | width: 1px; 219 | height: 70%; 220 | background: currentColor; 221 | transform-origin: 0 100%; 222 | transform: rotate(22.5deg) scale3d(1,0,1); 223 | transition: transform 0.3s; 224 | } 225 | 226 | .menu__item:hover .menu__item-sub::before { 227 | transform: rotate(22.5deg) scale3d(1,1,1); 228 | } 229 | 230 | .hover-reveal { 231 | position: absolute; 232 | z-index: -1; 233 | width: 200px; 234 | height: 280px; 235 | top: 0; 236 | left: 0; 237 | pointer-events: none; 238 | opacity: 0; 239 | will-change: transform, filter; 240 | } 241 | 242 | .hover-reveal__inner { 243 | overflow: hidden; 244 | } 245 | 246 | .hover-reveal__inner, 247 | .hover-reveal__img { 248 | width: 100%; 249 | height: 100%; 250 | position: relative; 251 | } 252 | 253 | .hover-reveal__img { 254 | background-size: cover; 255 | background-position: 50% 50%; 256 | } 257 | 258 | .cursor { 259 | display: none; 260 | } 261 | 262 | .credits { 263 | align-self: flex-start; 264 | padding: 5rem 0 0 0; 265 | } 266 | 267 | .credits a { 268 | text-decoration: underline; 269 | } 270 | 271 | @media screen and (min-width: 53em) { 272 | .frame { 273 | pointer-events: none; 274 | background: none; 275 | } 276 | .frame__title-wrap { 277 | pointer-events: auto; 278 | } 279 | .frame__demos { 280 | margin: 0.5rem 0 0; 281 | justify-self: start; 282 | } 283 | .frame__demos a { 284 | margin-right: 0.5rem; 285 | } 286 | .menu__item-sub { 287 | display: flex; 288 | } 289 | } 290 | 291 | @media (any-pointer: fine) { 292 | .cursor { 293 | position: fixed; 294 | top: 0; 295 | left: 0; 296 | display: block; 297 | pointer-events: none; 298 | } 299 | .cursor__inner { 300 | fill: var(--cursor-fill); 301 | stroke: var(--cursor-stroke); 302 | stroke-width: var(--cursor-stroke-width); 303 | opacity: 0.7; 304 | } 305 | .credits { 306 | padding-left: 25vw; 307 | } 308 | } 309 | 310 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 311 | html.has-scroll-smooth { 312 | overflow: hidden; 313 | } 314 | 315 | html.has-scroll-dragging { 316 | -webkit-user-select: none; 317 | -moz-user-select: none; 318 | -ms-user-select: none; 319 | user-select: none; 320 | } 321 | 322 | .has-scroll-smooth body { 323 | overflow: hidden; 324 | } 325 | 326 | .has-scroll-smooth [data-scroll-container] { 327 | min-height: 100vh; 328 | } 329 | 330 | .c-scrollbar { 331 | position: absolute; 332 | right: 0; 333 | top: 0; 334 | width: 11px; 335 | height: 100vh; 336 | transform-origin: center right; 337 | transition: transform 0.3s, opacity 0.3s; 338 | opacity: 0; 339 | } 340 | .c-scrollbar:hover { 341 | transform: scaleX(1.45); 342 | } 343 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 344 | opacity: 1; 345 | } 346 | 347 | .c-scrollbar_thumb { 348 | position: absolute; 349 | top: 0; 350 | right: 0; 351 | background-color: black; 352 | opacity: 0.5; 353 | width: 7px; 354 | border-radius: 10px; 355 | margin: 2px; 356 | cursor: -webkit-grab; 357 | cursor: grab; 358 | } 359 | .has-scroll-dragging .c-scrollbar_thumb { 360 | cursor: -webkit-grabbing; 361 | cursor: grabbing; 362 | } -------------------------------------------------------------------------------- /src/css/demo4/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 13px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-frame-bg: #fff; 14 | --color-text: #ce1f4c; 15 | --color-bg: #deca8c; 16 | --color-link: #000000; 17 | --color-link-hover: #fff; 18 | --color-menu: #fff; 19 | --color-menu-hover: #ce1f4c; 20 | --color-menu-deco: #ffffff; 21 | color: var(--color-text); 22 | background-color: var(--color-bg); 23 | --cursor-stroke: none; 24 | --cursor-fill: #d5545e; 25 | --cursor-stroke-width: 1px; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 29 | } 30 | 31 | /* Page Loader */ 32 | .js .loading::before, 33 | .js .loading::after { 34 | content: ''; 35 | position: fixed; 36 | z-index: 1000; 37 | } 38 | 39 | .js .loading::before { 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background: var(--color-bg); 45 | } 46 | 47 | .js .loading::after { 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | opacity: 0.4; 54 | background: var(--color-link); 55 | animation: loaderAnim 0.7s linear infinite alternate forwards; 56 | 57 | } 58 | 59 | @keyframes loaderAnim { 60 | to { 61 | opacity: 1; 62 | transform: scale3d(0.5,0.5,1); 63 | } 64 | } 65 | 66 | a { 67 | text-decoration: none; 68 | color: var(--color-link); 69 | outline: none; 70 | cursor: pointer; 71 | } 72 | 73 | a:hover, 74 | a:focus { 75 | color: var(--color-link-hover); 76 | outline: none; 77 | } 78 | 79 | .frame { 80 | position: relative; 81 | padding: 1rem 1.5rem; 82 | width: 100%; 83 | display: flex; 84 | text-transform: uppercase; 85 | z-index: 1000; 86 | background: var(--color-frame-bg); 87 | } 88 | 89 | .frame__title { 90 | font-size: 1rem; 91 | margin: 0; 92 | font-weight: 400; 93 | } 94 | 95 | .frame__links, .frame__demos, .frame__demos { 96 | margin: 0.5rem 0; 97 | } 98 | 99 | .frame__demos a { 100 | border-bottom: 1px solid currentColor; 101 | transition: 0.2s border-color; 102 | } 103 | 104 | .frame__demos a:hover, 105 | .frame__demos a:focus { 106 | border-color: transparent; 107 | } 108 | 109 | .frame__links a:not(:last-child), 110 | .frame__demos a:not(:last-child) { 111 | margin-right: 1rem; 112 | } 113 | 114 | a.frame__demo--current { 115 | border-color: transparent; 116 | color: var(--color-text); 117 | } 118 | 119 | .menu { 120 | padding: 5rem 0 40vh 0; 121 | width: 90vw; 122 | position: relative; 123 | display: flex; 124 | flex-direction: column; 125 | text-align: right; 126 | -webkit-touch-callout: none; 127 | -webkit-user-select: none; 128 | -moz-user-select: none; 129 | -ms-user-select: none; 130 | user-select: none; 131 | counter-reset: menucounter; 132 | } 133 | 134 | .menu__item { 135 | flex: none; 136 | display: flex; 137 | justify-content: flex-end; 138 | position: relative; 139 | padding-left: 5rem; 140 | } 141 | 142 | .menu__item::before { 143 | counter-increment: menucounter; 144 | content: counters(menucounter, ".", decimal-leading-zero); 145 | position: absolute; 146 | left: 0; 147 | color: var(--color-menu-deco); 148 | border-left: 3px solid currentColor; 149 | top: 20%; 150 | height: 60%; 151 | padding-left: 1rem; 152 | display: flex; 153 | align-items: center; 154 | line-height: 1; 155 | font-weight: bold; 156 | opacity: 0; 157 | transform: translateX(-1rem); 158 | transition: transform 0.3s, opacity 0.3s; 159 | } 160 | 161 | .menu__item:hover::before { 162 | color: var(--color-menu-deco); 163 | opacity: 1; 164 | transform: translateX(0); 165 | } 166 | 167 | .menu__item-text { 168 | position: relative; 169 | cursor: pointer; 170 | display: block; 171 | overflow: hidden; 172 | } 173 | 174 | .menu__item-textinner { 175 | display: block; 176 | font-family: moret, serif; 177 | font-weight: 300; 178 | white-space: nowrap; 179 | color: var(--color-menu); 180 | font-size: clamp(2rem, 7vw, 6rem); 181 | } 182 | 183 | .js .menu__item-textinner { 184 | transform: translateY(100%); 185 | } 186 | 187 | .menu__item:hover .menu__item-textinner { 188 | color: var(--color-menu-hover); 189 | } 190 | 191 | .menu__item-sub { 192 | display: none; 193 | text-transform: uppercase; 194 | font-weight: bold; 195 | white-space: nowrap; 196 | align-items: center; 197 | position: relative; 198 | margin-left: 2rem; 199 | padding-left: 3rem; 200 | color: var(--color-menu-deco); 201 | opacity: 0; 202 | transform: translateX(-1rem); 203 | transition: transform 0.3s, opacity 0.3s; 204 | mix-blend-mode: difference; 205 | } 206 | 207 | .menu__item:hover .menu__item-sub { 208 | color: var(--color-menu-deco); 209 | opacity: 1; 210 | transform: translateX(0); 211 | } 212 | 213 | .menu__item-sub::before { 214 | content: ''; 215 | position: absolute; 216 | left: 0; 217 | top: 15%; 218 | width: 1px; 219 | height: 70%; 220 | background: currentColor; 221 | transform-origin: 0 100%; 222 | transform: rotate(22.5deg) scale3d(1,0,1); 223 | transition: transform 0.3s; 224 | } 225 | 226 | .menu__item:hover .menu__item-sub::before { 227 | transform: rotate(22.5deg) scale3d(1,1,1); 228 | } 229 | 230 | .hover-reveal { 231 | position: absolute; 232 | z-index: -1; 233 | width: 220px; 234 | height: 280px; 235 | top: 0; 236 | left: 0; 237 | pointer-events: none; 238 | opacity: 0; 239 | will-change: transform, filter; 240 | } 241 | 242 | .hover-reveal__img { 243 | width: 100%; 244 | height: 100%; 245 | } 246 | 247 | .hover-reveal__img { 248 | background-size: cover; 249 | background-position: 50% 50%; 250 | } 251 | 252 | .cursor { 253 | display: none; 254 | } 255 | 256 | .credits { 257 | align-self: flex-start; 258 | padding: 5rem 0 0 0; 259 | } 260 | 261 | .credits a { 262 | text-decoration: underline; 263 | } 264 | 265 | @media screen and (min-width: 53em) { 266 | .frame { 267 | background: none; 268 | pointer-events: none; 269 | } 270 | .frame__title-wrap { 271 | pointer-events: auto; 272 | } 273 | .frame__demos { 274 | margin: 0.5rem 0 0; 275 | justify-self: start; 276 | } 277 | .frame__demos a { 278 | margin-right: 0.5rem; 279 | } 280 | .menu__item { 281 | padding-left: 25vw; 282 | } 283 | .menu__item-sub { 284 | display: flex; 285 | } 286 | } 287 | 288 | @media (any-pointer: fine) { 289 | .cursor { 290 | position: fixed; 291 | top: 0; 292 | left: 0; 293 | display: block; 294 | pointer-events: none; 295 | } 296 | .cursor__inner { 297 | fill: var(--cursor-fill); 298 | stroke: var(--cursor-stroke); 299 | stroke-width: var(--cursor-stroke-width); 300 | opacity: 0.7; 301 | } 302 | .credits { 303 | padding-left: 25vw; 304 | } 305 | } 306 | 307 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 308 | html.has-scroll-smooth { 309 | overflow: hidden; 310 | } 311 | 312 | html.has-scroll-dragging { 313 | -webkit-user-select: none; 314 | -moz-user-select: none; 315 | -ms-user-select: none; 316 | user-select: none; 317 | } 318 | 319 | .has-scroll-smooth body { 320 | overflow: hidden; 321 | } 322 | 323 | .has-scroll-smooth [data-scroll-container] { 324 | min-height: 100vh; 325 | } 326 | 327 | .c-scrollbar { 328 | position: absolute; 329 | right: 0; 330 | top: 0; 331 | width: 11px; 332 | height: 100vh; 333 | transform-origin: center right; 334 | transition: transform 0.3s, opacity 0.3s; 335 | opacity: 0; 336 | } 337 | .c-scrollbar:hover { 338 | transform: scaleX(1.45); 339 | } 340 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 341 | opacity: 1; 342 | } 343 | 344 | .c-scrollbar_thumb { 345 | position: absolute; 346 | top: 0; 347 | right: 0; 348 | background-color: black; 349 | opacity: 0.5; 350 | width: 7px; 351 | border-radius: 10px; 352 | margin: 2px; 353 | cursor: -webkit-grab; 354 | cursor: grab; 355 | } 356 | .has-scroll-dragging .c-scrollbar_thumb { 357 | cursor: -webkit-grabbing; 358 | cursor: grabbing; 359 | } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/favicon.ico -------------------------------------------------------------------------------- /src/img/demo1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/1.jpg -------------------------------------------------------------------------------- /src/img/demo1/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/10.jpg -------------------------------------------------------------------------------- /src/img/demo1/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/11.jpg -------------------------------------------------------------------------------- /src/img/demo1/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/12.jpg -------------------------------------------------------------------------------- /src/img/demo1/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/13.jpg -------------------------------------------------------------------------------- /src/img/demo1/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/14.jpg -------------------------------------------------------------------------------- /src/img/demo1/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/15.jpg -------------------------------------------------------------------------------- /src/img/demo1/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/16.jpg -------------------------------------------------------------------------------- /src/img/demo1/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/17.jpg -------------------------------------------------------------------------------- /src/img/demo1/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/18.jpg -------------------------------------------------------------------------------- /src/img/demo1/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/19.jpg -------------------------------------------------------------------------------- /src/img/demo1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/2.jpg -------------------------------------------------------------------------------- /src/img/demo1/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/20.jpg -------------------------------------------------------------------------------- /src/img/demo1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/3.jpg -------------------------------------------------------------------------------- /src/img/demo1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/4.jpg -------------------------------------------------------------------------------- /src/img/demo1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/5.jpg -------------------------------------------------------------------------------- /src/img/demo1/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/6.jpg -------------------------------------------------------------------------------- /src/img/demo1/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/7.jpg -------------------------------------------------------------------------------- /src/img/demo1/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/8.jpg -------------------------------------------------------------------------------- /src/img/demo1/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo1/9.jpg -------------------------------------------------------------------------------- /src/img/demo2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/1.jpg -------------------------------------------------------------------------------- /src/img/demo2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/10.jpg -------------------------------------------------------------------------------- /src/img/demo2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/11.jpg -------------------------------------------------------------------------------- /src/img/demo2/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/12.jpg -------------------------------------------------------------------------------- /src/img/demo2/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/13.jpg -------------------------------------------------------------------------------- /src/img/demo2/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/14.jpg -------------------------------------------------------------------------------- /src/img/demo2/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/15.jpg -------------------------------------------------------------------------------- /src/img/demo2/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/16.jpg -------------------------------------------------------------------------------- /src/img/demo2/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/17.jpg -------------------------------------------------------------------------------- /src/img/demo2/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/18.jpg -------------------------------------------------------------------------------- /src/img/demo2/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/19.jpg -------------------------------------------------------------------------------- /src/img/demo2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/2.jpg -------------------------------------------------------------------------------- /src/img/demo2/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/20.jpg -------------------------------------------------------------------------------- /src/img/demo2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/3.jpg -------------------------------------------------------------------------------- /src/img/demo2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/4.jpg -------------------------------------------------------------------------------- /src/img/demo2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/5.jpg -------------------------------------------------------------------------------- /src/img/demo2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/6.jpg -------------------------------------------------------------------------------- /src/img/demo2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/7.jpg -------------------------------------------------------------------------------- /src/img/demo2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/8.jpg -------------------------------------------------------------------------------- /src/img/demo2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo2/9.jpg -------------------------------------------------------------------------------- /src/img/demo3/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/1.jpg -------------------------------------------------------------------------------- /src/img/demo3/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/10.jpg -------------------------------------------------------------------------------- /src/img/demo3/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/11.jpg -------------------------------------------------------------------------------- /src/img/demo3/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/12.jpg -------------------------------------------------------------------------------- /src/img/demo3/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/13.jpg -------------------------------------------------------------------------------- /src/img/demo3/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/14.jpg -------------------------------------------------------------------------------- /src/img/demo3/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/15.jpg -------------------------------------------------------------------------------- /src/img/demo3/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/16.jpg -------------------------------------------------------------------------------- /src/img/demo3/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/17.jpg -------------------------------------------------------------------------------- /src/img/demo3/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/18.jpg -------------------------------------------------------------------------------- /src/img/demo3/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/19.jpg -------------------------------------------------------------------------------- /src/img/demo3/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/2.jpg -------------------------------------------------------------------------------- /src/img/demo3/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/20.jpg -------------------------------------------------------------------------------- /src/img/demo3/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/3.jpg -------------------------------------------------------------------------------- /src/img/demo3/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/4.jpg -------------------------------------------------------------------------------- /src/img/demo3/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/5.jpg -------------------------------------------------------------------------------- /src/img/demo3/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/6.jpg -------------------------------------------------------------------------------- /src/img/demo3/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/7.jpg -------------------------------------------------------------------------------- /src/img/demo3/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/8.jpg -------------------------------------------------------------------------------- /src/img/demo3/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo3/9.jpg -------------------------------------------------------------------------------- /src/img/demo4/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/1.jpg -------------------------------------------------------------------------------- /src/img/demo4/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/10.jpg -------------------------------------------------------------------------------- /src/img/demo4/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/11.jpg -------------------------------------------------------------------------------- /src/img/demo4/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/12.jpg -------------------------------------------------------------------------------- /src/img/demo4/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/13.jpg -------------------------------------------------------------------------------- /src/img/demo4/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/14.jpg -------------------------------------------------------------------------------- /src/img/demo4/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/15.jpg -------------------------------------------------------------------------------- /src/img/demo4/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/16.jpg -------------------------------------------------------------------------------- /src/img/demo4/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/17.jpg -------------------------------------------------------------------------------- /src/img/demo4/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/18.jpg -------------------------------------------------------------------------------- /src/img/demo4/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/19.jpg -------------------------------------------------------------------------------- /src/img/demo4/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/2.jpg -------------------------------------------------------------------------------- /src/img/demo4/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/20.jpg -------------------------------------------------------------------------------- /src/img/demo4/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/3.jpg -------------------------------------------------------------------------------- /src/img/demo4/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/4.jpg -------------------------------------------------------------------------------- /src/img/demo4/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/5.jpg -------------------------------------------------------------------------------- /src/img/demo4/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/6.jpg -------------------------------------------------------------------------------- /src/img/demo4/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/7.jpg -------------------------------------------------------------------------------- /src/img/demo4/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/8.jpg -------------------------------------------------------------------------------- /src/img/demo4/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo4/9.jpg -------------------------------------------------------------------------------- /src/img/demo5/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/1.jpg -------------------------------------------------------------------------------- /src/img/demo5/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/10.jpg -------------------------------------------------------------------------------- /src/img/demo5/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/11.jpg -------------------------------------------------------------------------------- /src/img/demo5/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/12.jpg -------------------------------------------------------------------------------- /src/img/demo5/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/13.jpg -------------------------------------------------------------------------------- /src/img/demo5/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/14.jpg -------------------------------------------------------------------------------- /src/img/demo5/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/15.jpg -------------------------------------------------------------------------------- /src/img/demo5/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/16.jpg -------------------------------------------------------------------------------- /src/img/demo5/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/17.jpg -------------------------------------------------------------------------------- /src/img/demo5/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/18.jpg -------------------------------------------------------------------------------- /src/img/demo5/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/19.jpg -------------------------------------------------------------------------------- /src/img/demo5/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/2.jpg -------------------------------------------------------------------------------- /src/img/demo5/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/20.jpg -------------------------------------------------------------------------------- /src/img/demo5/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/3.jpg -------------------------------------------------------------------------------- /src/img/demo5/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/4.jpg -------------------------------------------------------------------------------- /src/img/demo5/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/5.jpg -------------------------------------------------------------------------------- /src/img/demo5/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/6.jpg -------------------------------------------------------------------------------- /src/img/demo5/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/7.jpg -------------------------------------------------------------------------------- /src/img/demo5/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/8.jpg -------------------------------------------------------------------------------- /src/img/demo5/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RapidImageHoverMenuEffects/16efa4884dffd30d6bc1cdee6702f2528f3354dc/src/img/demo5/9.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 1 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 |
24 |

Menu Hover Effects

25 |
26 | Previous demo 27 | Article 28 | GitHub 29 |
30 |
31 | 01 32 | 02 33 | 03 34 | 04 35 | 05 36 |
37 |
38 |
39 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 2 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 |
24 |

Menu Hover Effects

25 |
26 | Previous demo 27 | Article 28 | GitHub 29 |
30 |
31 | 01 32 | 02 33 | 03 34 | 04 35 | 05 36 |
37 |
38 |
39 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 3 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 |
24 |

Menu Hover Effects

25 |
26 | Previous demo 27 | Article 28 | GitHub 29 |
30 |
31 | 01 32 | 02 33 | 03 34 | 04 35 | 05 36 |
37 |
38 |
39 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /src/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 4 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 |
24 |

Menu Hover Effects

25 |
26 | Previous demo 27 | Article 28 | GitHub 29 |
30 |
31 | 01 32 | 02 33 | 03 34 | 04 35 | 05 36 |
37 |
38 |
39 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /src/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations for Menu Hover Effects | Demo 5 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 |
24 |

Menu Hover Effects

25 |
26 | Previous demo 27 | Article 28 | GitHub 29 |
30 |
31 | 01 32 | 02 33 | 03 34 | 04 35 | 05 36 |
37 |
38 |
39 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /src/js/cursor.js: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap'; 2 | import { lerp, getMousePos } from './utils'; 3 | 4 | // Track the mouse position 5 | let mouse = {x: 0, y: 0}; 6 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev)); 7 | 8 | export default class Cursor { 9 | constructor(el) { 10 | this.DOM = {el: el}; 11 | this.DOM.el.style.opacity = 0; 12 | 13 | this.bounds = this.DOM.el.getBoundingClientRect(); 14 | 15 | this.renderedStyles = { 16 | tx: {previous: 0, current: 0, amt: 0.2}, 17 | ty: {previous: 0, current: 0, amt: 0.2} 18 | }; 19 | 20 | this.onMouseMoveEv = () => { 21 | this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2; 22 | this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2; 23 | gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1}); 24 | requestAnimationFrame(() => this.render()); 25 | window.removeEventListener('mousemove', this.onMouseMoveEv); 26 | }; 27 | window.addEventListener('mousemove', this.onMouseMoveEv); 28 | } 29 | render() { 30 | this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2; 31 | this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2; 32 | 33 | for (const key in this.renderedStyles ) { 34 | this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt); 35 | } 36 | 37 | this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px)`; 38 | 39 | requestAnimationFrame(() => this.render()); 40 | } 41 | } -------------------------------------------------------------------------------- /src/js/demo1/index.js: -------------------------------------------------------------------------------- 1 | import Cursor from '../cursor'; 2 | import {preloader} from '../preloader'; 3 | import LocomotiveScroll from 'locomotive-scroll'; 4 | import Menu from './menu'; 5 | 6 | // menu (