Shifting shadow transition effect when hovering over the box

Question

Shifting shadow transition effect when hovering over the box

I'm attempting to create a slide animation effect with box-shadow over an image, where the black background moves from left to right. However, I am facing a strange blinking issue that I can't seem to resolve even after searching for solutions on Stack Overflow.

I also experimented with using a section element instead of an image, but encountered the same problem.

You can view the JSFiddle demo here

HTML

<section>
</section>

CSS

section {
  border:black 1px solid;
  width:500px;
  height:200px;
  transition:1s ease-out
}

section:hover{
  box-shadow:inset 500px 0 0 #222;
  float:left;
  transition:1s ease-out;
}

css hover transition slide box-shadow

Answer 1

Answer №1

Here is an alternative approach using a straightforward pseudo element technique and applying transition effects to the width property by adjusting its right position:

section {
      border: black 1px solid;
      width: 500px;
      height: 200px;
      position:relative;
      color:#c2c2c2;
      text-align:center;
      padding-top:50px;
      box-sizing:border-box;
    }

    section:before {
      position: absolute;
      content: " ";
      top: 0;
      bottom: 0;
      left: 0;
      background: #000;
      right: 100%;
      transition:1s ease-out;
      z-index:-1;
    }
    section:hover::before {
      right:0;
    }

<section>
      add your text here
    </section>

Answer 2

Here is an alternative approach using a straightforward pseudo element technique and applying transition effects to the width property by adjusting its right position:

section {
      border: black 1px solid;
      width: 500px;
      height: 200px;
      position:relative;
      color:#c2c2c2;
      text-align:center;
      padding-top:50px;
      box-sizing:border-box;
    }

    section:before {
      position: absolute;
      content: " ";
      top: 0;
      bottom: 0;
      left: 0;
      background: #000;
      right: 100%;
      transition:1s ease-out;
      z-index:-1;
    }
    section:hover::before {
      right:0;
    }

<section>
      add your text here
    </section>

Answer 3

Answer №2

An alternative approach is to introduce a subtle box shadow effect in the initial state with a minimal spread radius.

  div {
      box-shadow: inset 0 0 0 0.001px black;
  }

Answer 4

An alternative approach is to introduce a subtle box shadow effect in the initial state with a minimal spread radius.

  div {
      box-shadow: inset 0 0 0 0.001px black;
  }

Answer 5

Answer №3

It seems like the issue is related to how the box-shadow property works. Consider trying a different method. Here's an alternative solution that eliminates flickering by increasing the thickness of the left border instead of using box-shadow:

div {
  position: relative;
  display: inline-block;
}
section {
  border: black 1px solid;
  width: 500px;
  height: 200px;
  transition: 1s ease-out;
  box-sizing: border-box;
}

div:hover section {
  border-left-width: 500px;
  float: left;
  transition: 1s ease-out;
}

section~* {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #888;
}

<div class="prog">
  <section></section>
  <p>Here's some text content.</p>
</div>

https://jsfiddle.net/k5kznmvL/

Answer 6

It seems like the issue is related to how the box-shadow property works. Consider trying a different method. Here's an alternative solution that eliminates flickering by increasing the thickness of the left border instead of using box-shadow:

div {
  position: relative;
  display: inline-block;
}
section {
  border: black 1px solid;
  width: 500px;
  height: 200px;
  transition: 1s ease-out;
  box-sizing: border-box;
}

div:hover section {
  border-left-width: 500px;
  float: left;
  transition: 1s ease-out;
}

section~* {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #888;
}

<div class="prog">
  <section></section>
  <p>Here's some text content.</p>
</div>

https://jsfiddle.net/k5kznmvL/

Shifting shadow transition effect when hovering over the box

Answer №1

Answer №2

Answer №3

Similar questions

CSS not working when attempting to override Angular (13) Material file

Using the "margin: auto" property to center the text box

The bottom of the page displays varying outcomes between Code Snippet (CodePen) and Angular

The design of the Bootstrap alert button is not working properly as it fails to close when clicked on

arrangement of columns within the <select> element

Ways to conceal a dynamically generated div upon page load?

CSS issue: Font size

How can I create a more spacious and stylish JTextField for my address bar?

In the Bootstrap grid, the first two rows are tightly packed with no empty space between them

Discover the hidden content within a div by hovering over it

CSS - fixed table headers

What is the best way to make floating images fill the entire space?

Employ CSS to target the initial and final items within sets of identical elements

What is the best way to rearrange columns in bootstrapping version 3

Deciphering image coordinates provided for incorporating an animated image component into a form

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

Unable to adjust the color of the font

What is the process for adding personalized arrows to a slick slider that switches images when hovered over?

What steps can I take to update the header and footer of my website?

JavaScript Animation: Enhancing TextBox Borders