Advanced Hover Effect to WOW your visitors!

I came across the hover effect in the cover image at several sites, but just could not wrap my head around how to develop it. Thankfully after reading this blog, I finally got an idea on how to develop it.

Demo

Getting Started


This content originally appeared on DEV Community and was authored by Tapajyoti Bose

I came across the hover effect in the cover image at several sites, but just could not wrap my head around how to develop it. Thankfully after reading this blog, I finally got an idea on how to develop it.

Demo

Getting Started

Let's start coding!

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Hover Effect</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="hover-container">
            <img
                src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80"
                class="img"
            />
            <div class="overlay"></div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

style.css

.hover-container {
    height: max-content;
    width: max-content;
    position: relative;
    margin: 12px 24px;
}

.img {
    display: inline-block;
    height: 200px;
}

.overlay,
.hover-container::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.hover-container::after {
    content: "";
}

NOTE: Without the ::after pseudo-element hovering the hover-container would trigger .overlay:hover instead of .hover-container:hover

Now to the meat of the hover effect. We would be adding the effect to all elements with hover-container class. First the mouse position over the element will be tracked and the element would be styled accordingly (on mousemove)

script.js

document.querySelectorAll(".hover-container").forEach((container) => {
    // reseting styles for the element when the mouse exits the element
    container.onmouseleave = (e) => {
        const overlayChild = e.target.querySelector(".overlay");

        e.target.style.transform = "rotateY(0) rotateX(0)";
        overlayChild.style.background = "transparent";
    };

    // adding a listener to style the element when the mouse moves inside the element
    container.addEventListener("mousemove", (e) => {
        const rect = e.target.getBoundingClientRect();
        const x = e.clientX - rect.left; //x position within the element.
        const y = e.clientY - rect.top; //y position within the element.
        const width = e.target.offsetWidth;
        const height = e.target.offsetHeight;

        const overlayChild = e.target.querySelector(".overlay");

        // the values can be tweaked as per personal requirements
        e.target.style.transform = `rotateY(${-(0.5 - x / width) * 30
            }deg) rotateX(${(y / height - 0.5) * 30}deg)`;

        overlayChild.style.background = `radial-gradient(
            circle at ${x}px ${y}px,
            rgba(255, 255, 255, 0.2),
            rgba(0, 0, 0, 0.2)
        )`;
    });
})

NOTE: This is a simpler version of the effect shown in the cover image, with a few minor tweaks, that effect can be obtained.

Reference

  1. Windows 10 button hover effect

Thanks for reading

Checkout my projects:

GitHub logo ruppysuppy / SmartsApp

?? An End to End Encrypted Cross Platform messenger app.

Smartsapp

A fully cross-platform messenger app with End to End Encryption (E2EE).

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Platforms Supported

  1. Desktop: Windows, Linux, MacOS
  2. Mobile: Android, iOS
  3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

  1. Go to firebase console and create a new project with the name Smartsapp
  2. Enable Google Analylitics

App Setup

  1. Create an App for the project from the overview page
  2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

  1. Go to the project Authentication section
  2. Select Sign-in method tab
  3. Enable Email/Password and Google sign in

Firestore Setup

  1. Go to the project Firestore section
  2. Create firestore provisions for the project (choose the server nearest to your location)
  3. Go to the Rules

GitHub logo ruppysuppy / Daily-Coding-Problem-Solutions

??️ Solutions for 350+ Interview Questions asked at FAANG and other top tech companies

Daily Coding Problem Solutions

This repository contains the Daily Coding Problem solutions in python.

Setup

Install the 3rd party packages, perform the following steps:

  1. cd Daily-Coding-Problem-Solutions
  2. Run pip install -r requirements.txt

Contribution Guidelines

Please go through Contribution Guidelines before you contribute.

Note:

  1. Modules numpy and matplotlib are used for presentation purpose only and hence are optional.
  2. Some solutions require an additional Data Structures module.

Problems

Problem 1

Given a list of numbers, return whether any two sums to k For example, given [10, 15, 3, 7] and k of 17, return true since 10 + 7 is 17.

Bonus: Can you do this in one pass?

Solution

Problem 2

This problem was asked by Uber.

Given an array of integers, return a new array such that each element at index i of the new array is the product of all the numbers in the original array except the one at…

Reach out to me on


This content originally appeared on DEV Community and was authored by Tapajyoti Bose


Print Share Comment Cite Upload Translate
APA
Tapajyoti Bose | Sciencx (2022-10-01T05:02:49+00:00) » Advanced Hover Effect to WOW your visitors!. Retrieved from https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/.
MLA
" » Advanced Hover Effect to WOW your visitors!." Tapajyoti Bose | Sciencx - Sunday May 2, 2021, https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/
HARVARD
Tapajyoti Bose | Sciencx Sunday May 2, 2021 » Advanced Hover Effect to WOW your visitors!., viewed 2022-10-01T05:02:49+00:00,<https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/>
VANCOUVER
Tapajyoti Bose | Sciencx - » Advanced Hover Effect to WOW your visitors!. [Internet]. [Accessed 2022-10-01T05:02:49+00:00]. Available from: https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/
CHICAGO
" » Advanced Hover Effect to WOW your visitors!." Tapajyoti Bose | Sciencx - Accessed 2022-10-01T05:02:49+00:00. https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/
IEEE
" » Advanced Hover Effect to WOW your visitors!." Tapajyoti Bose | Sciencx [Online]. Available: https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/. [Accessed: 2022-10-01T05:02:49+00:00]
rf:citation
» Advanced Hover Effect to WOW your visitors! | Tapajyoti Bose | Sciencx | https://www.scien.cx/2021/05/02/advanced-hover-effect-to-wow-your-visitors/ | 2022-10-01T05:02:49+00:00
https://github.com/addpipe/simple-recorderjs-demo