A
Anonymous

Image Slider - Copy this React, Tailwind Component to your project

Generate a React component that displays a row of images with the following features: The images should move slowly and continuously from left to right in a smooth animation, using CSS for performance optimization. The animation should pause when the user hovers over the container. When the user hovers over an individual image: A green tint should appear over part of the image, but not cover it entirely. A description text should appear with a smooth animation after the green tint is applied. An 'add' icon should appear in the top right corner of the image with a slight delay after the text is shown. When the user clicks on the 'add' icon: The image should zoom in and center on the screen. The background should darken with a semi transparent black overlay to bring attention to the image. Use react icons for the 'add' icon and ensure the images are optimized using the loading="lazy" attribute. The component should use CSS animations for the movement and hover effects to minimize lag and ensure smooth performance.

Prompt
Component Preview

About

ImageSlider - Smoothly moving images with hover effects, green tint, and descriptions. Built with React and Tailwind. Access free code!

Share

Last updated 1 month ago