CODEWITHSUNDEEP
javascripthtmlcss
The Old County
The Old County

Reputation: 109

HTML5 animations creating a dashed border that smoothly moves inward on hover

I am making a drag and drop module - and need to have it so that when the dragging process occurs - the dashed line around the outside moves in and the box goes a particular color. I don't want the look of the dashed line to change though. There is the option of maybe having the dashed line animate move around the edge of the box

.

https://jsfiddle.net/L47xrsnt/4/

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;
  }

}

enter image description here enter image description here

Upvotes: 2

Views: 509

Answers (2)

Temani Afif
Temani Afif

Reputation: 274272

You can try like below:

.box {
  height: 100px;
  background: yellow;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 3px;
  border: 2px dashed pink;
  transition: 0.5s;
}

.box:hover::before {
  margin: 10px;
}
<div class="box">

</div>

Upvotes: 2

Vipul
Vipul

Reputation: 356

To make the border transition smoother, you can add following CSS code in your :

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

You can add other parameters in transaction as per your requirement.

Upvotes: 0

Related Questions