Clone Project

Magnetic Images and Video on Hover. Stick to the mouse and hide on scroll

Created by
KarinaSlizova
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
AI Description

This component allows images or videos to appear when hovered over, creating a magnetic effect that follows the mouse cursor and overlays text. It is particularly useful for showcasing portfolios or service listings. The animation was implemented for the Diorama web agency website.

Key Features:

  • Magnetic hover effect that allows images or videos to stick to the mouse cursor.
  • Overlay functionality that displays content above text when hovered.
  • Ability to hide the content when the user scrolls down.
  • Supports various media types including images, videos, and embedded elements.

Design Elements:

  • Dynamic hover interactions that enhance user engagement.
  • Use of background videos and images to create an immersive experience.
  • Clean layout with a focus on visual content, suitable for creative portfolios.

Potential Use Cases:

  • Creative portfolios for photographers or videographers.
  • Service listings for agencies or freelancers.
  • Interactive product showcases for e-commerce websites.
  • Landing pages for events or promotions.

Conclusion: This component offers a unique and engaging way to present visual content, making it suitable for various creative applications.

Description from Webflow:  
The images or video appear as you hover and they have a magnetic effect - they stick to the mouse and overlay the text. This effect could be used well in a portfolio or as a listing of services. This animation was implemented for Diorama web agency website - https://www.diorama.sk/
Tags from Webflow: 
images,  video,  portfolio,  hover,  hovereffect,  magnetic,  scroll,  animation,  sticky,  hoveranimation,  interactions,  toggle,  mousehover
.