On hover, HTML5 animations smoothly transition a dashed border inward

Question

On hover, HTML5 animations smoothly transition a dashed border inward

I'm in the process of creating a drag and drop module and I want to ensure that as the user drags an item, the dashed line around the outside moves inward and the box changes color. However, I don't want the appearance of the dashed line to change. One idea is to animate the movement of the dashed line along the edge of the box.

.

How can I prevent the contents from jumping by applying absolute positioning to disconnect them from the border morphing?
Is there a way to smoothly animate the border moving in and out using CSS3?

Link to example

HTML:

<div class="drag-drop">
  <div class="drag-drop-border">
    <div class="contents">
      xx
    </div>
  </div>
</div>

CSS:

.drag-drop {

  .drag-drop-border {
    border: 2px dashed pink;
  }

  &:hover {
    padding: 15px;
    background: gold;
  }

}

https://i.sstatic.net/O8Y4j.png https://i.sstatic.net/nzLgI.png

javascript html css

Answer 1

Answer №1

Here is a suggestion to achieve the desired effect:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  z-index: -1;
  transition: all 0.5s;
}

.container:hover::before {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

<div class="container">

</div>

Answer 2

Here is a suggestion to achieve the desired effect:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  z-index: -1;
  transition: all 0.5s;
}

.container:hover::before {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

<div class="container">

</div>

Answer 3

Answer №2

To create a seamless border transition effect, consider incorporating the following CSS snippet into your code:

{
    transition: 0.5s padding ease-in-out;
}

Feel free to adjust the parameters in the transaction to suit your specific needs.

Answer 4

To create a seamless border transition effect, consider incorporating the following CSS snippet into your code:

{
    transition: 0.5s padding ease-in-out;
}

Feel free to adjust the parameters in the transaction to suit your specific needs.

On hover, HTML5 animations smoothly transition a dashed border inward

Answer №1

Answer №2

Similar questions

Unlocking the Process of Sending Images to a Server and Accessing Them from the Client End

Execute a function within useEffect continuously until the contract is fully loaded

What is the best way to add hyphens between words in PHP code?

Encountered a Server Error: Invalid hook call. Hooks are restricted to being called within the body of a function component specifically in _app.js

Mobile devices with a horizontal scroll

Tips on how to modify the Firestore field named `likes` by incrementing or decrementing one

Is there a way to automatically generate an HTML template within a .cshtml file using Visual Studio 2022?

What is the best way for me to allow specific individuals to add text or strings to a .txt file stored on my server using PHP?

Using React and Material-UI to dynamically populate a table with data retrieved from

Can you recall the name given to characteristics that do not have any value assigned to them (e.g. "checked" and "selected")?

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

Set a variable in MongoDB to retrieve the results of the find() method and convert them

Using Typescript with d3 Library in Power BI

Ensuring Consistency in Array Lengths of Two Props in a Functional Component using TypeScript

I am experiencing an issue where my React application is not loading the fonts when utilizing `type: 'asset/resource'` to load fonts within a CSS file. Can anyone provide guidance on

Issues with tabs functionality in Bootstrap version 4.3.1, unlike the smooth operation in v4.1.0

javascriptJQuery validation function triggers JSF ajax request

Increase the width of the div to extend it to the right side of the

Click to copy: Utilizing Italics in React Components

Avoiding content resizing when using a drawer in Material UI