What is the best way to create a smooth transition for the box-shadow of a div when hovering over it, causing it to fade in and out seamlessly

I'm exploring animations and experimenting with a div containing three box-shadows. My goal is to create a hover effect where the box-shadows fade in one after the other, starting with the closest one to the div. I also want them to fade out in reverse order when the cursor stops hovering over the div. Any suggestions on how to achieve this?

#div2 {
  background-color: aquamarine;
  box-shadow: 15px 15px 10px blueviolet inset, -15px -15px 10px blueviolet inset;
  width: 500px;
  height: 200px;
  padding: 25px;
  padding-left: 50px;
  transition: box-shadow 2s ease;
}

#div2:hover {
  background-color: aquamarine;
  box-shadow: 5px 5px 1px darkblue, 10px 10px 3px blue, 15px 15px 5px lightblue, 15px 15px 10px blueviolet inset, -15px -15px 10px blueviolet inset;
}
<div id="div2">
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

cssanimationhover

Answer №1

When working with multiple box-shadow animations, it's important to ensure consistency in the number of shadows applied. This helps the browser differentiate between each box-shadow.

As an example, you can copy the box-shadow properties from a :hover state and manipulate some of them by making them transparent with a distance of 0px:

#div2 {
  background-color: aquamarine;
  box-shadow: 
    0px 0px 1px transparent, 
    0px 0px 3px transparent, 
    0px 0px 5px transparent, 
    15px 15px 10px blueviolet inset, 
    -15px -15px 10px blueviolet inset;
    
  width: 500px;
  height: 200px;
  padding: 25px;
  padding-left: 50px;
  transition: box-shadow 2s ease;
}

#div2:hover {
  box-shadow: 
    5px 5px 1px darkblue, 
    10px 10px 3px blue, 
    15px 15px 5px lightblue, 
    15px 15px 10px blueviolet inset, 
    -15px -15px 10px blueviolet inset;
}
<div id="div2">
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The cascade of CSS elements arrangement

I have two unique boxes set up like this: <div id="box1"></div> <div id="box2"></div> The second box, box2, has a border and I'm looking to cover the top border with box1. To achieve this, I've applied a negative margin- ...

csslayer

Issues arise when attempting to display articles using inline-block styling

I have been diving into the world of HTML and CSS in an attempt to broaden my skillset. However, while working on an exercise, I encountered a roadblock. The challenge lies in having the 4 articles within the <section id="news"> to display ...

htmlcss

A guide to implementing toggle functionality on child elements

After clicking the button, the entire sidebar toggles, but I only want the side menus to toggle. Here is the relevant HTML code: <nav id="sidebar"> <div class="sidebar-header"> <img src="/fintantra/image ...

javascripthtmljquerycss

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

What is the best way to ensure that an input field and a button stretch across the entire row in a Bootstrap form?

I need assistance with aligning the Post button to the right and having the text field for tags occupy the entire left section of the row within a Bootstrap 3 form. The form markup is shown below: https://i.sstatic.net/401RU.png Below is the complete cod ...

htmlcsstwitter-bootstrap-3

Ensuring the header retains its height by utilizing the <strong> element in Bootstrap

I'm currently working on a collapsible sidebar where the header shrinks to display only the letters 'J' and 'L' when collapsed. The issue I'm facing is finding the right balance between an empty header and adding in these lett ...

htmlcssbootstrap-4height

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

Modify the color of the text to be white

How can I modify the code below to change the text color to white? The original code is inspired by this question. I am unsure about how the text color was originally set to blue. .footer-background { padding-top: 20px; padding-bottom: 20px; bac ...

htmlcsstwitter-bootstrap-3

Ways to swap out an img element with an almost identical gif element while maintaining its precise placement consistently

I am facing an issue in my code where a random element is generated within the body and when clicked, it is replaced with another gif element. I am using offset() to obtain the top and left values of the original image, and then using replaceWith() to swap ...

javascriptjqueryhtmlcssgif

What could be the reason for the SVG gradient not appearing in Explorer?

Check out my website at Everything was working smoothly with the background for the top menu, but suddenly it stopped working. The strange thing is, I only made adjustments to the position settings of some unrelated elements. ...

internet-explorercsssvg

What is the method for obtaining the image alt attribute using JavaScript?

I can't seem to retrieve the image alt tag using JavaScript. Is it even possible and if so, how should I go about it? Perhaps something like this: $caption.text( flkty.selectedElement ).attr('alt') (last line of JavaScript) But I'm st ...

javascripthtmlcssaltflickity

What are some ways to ensure my web application appears correctly on Internet Explorer versions 8 and 9?

When I compare how my application looks in IE versus Chrome and Firefox, it seems like there are styling issues. I want to address this problem. I attempted to use the IE developer tool but couldn't find any options to customize styles and CSS. How d ...

cssinternet-explorercompatibility

This code is only functional on JSFiddle platform

I encountered an issue with my code recently. It seems to only work properly when tested on jsfiddle, and I can't figure out why it's not functioning correctly on codepen or when run from local files. Why is this code specific to jsfiddle? When ...

javascriptjqueryhtmlcss

Issues with Implementing Custom CSS Styles in ag-grid

It seems like a simple customization, but the documentation on it is quite limited. I'm trying to change the line-height of one of my tables so that text doesn't double-space when wrapping. Here's the CSS code from Test.module.css: .ag-them ...

cssreactjsnext.jsag-grid

Zooming on a webpage is causing problems

One issue I'm facing is with the elements on my page acting strange when I zoom in and out. Everything seems to be working fine except for a container div that should overlay a color over the image background. When I zoom in or switch to mobile view, ...

javascripthtmlcss

nth-child selector causing tbody element to break

I have a code snippet that should alternate row colors between yellow and red. It works perfectly without using the <tbody> tags. However, when I include the <tbody> tags in my code, the layout breaks. It seems to restart with yellow at every n ...

htmlcsscss-selectors

What is the best way to add a hyperlink to my directory pictures?

Recently, I came across this piece of code: <? include "top.php"; ?> <center> <a href='upload.php'><button>Upload Image</button></a> </center> <br> <?php $www_root = 'http://annexsecurit ...

phphtmlcss

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass

Rendering of @font-face on Windows 7 was executed flawlessly

I have been utilizing @font-face to implement custom fonts on a website. The custom font displays correctly in Firefox, IE, Safari, and Chrome on Mac. However, when viewed on Chrome in Windows 7, the text appears green at 10px instead of black or grey. ... ...

cssgoogle-chromefont-faceembedded-fonts