CODEWITHSUNDEEP
javascriptjqueryhtmlcss
slsl3079
slsl3079

Reputation: 111

On hover, fill in background color of div/box from corner of box

I'm trying to fill in the background color of a div/box from the corner of the box and find a way to specify which corner to start the "filling in."

I have a box which does fill in at hover, but it only does so from the top, bottom, left or right. 

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  background: ghostwhite;
  z-index: -1;
  transition: transform 0.25s ease;
}

#box:hover::after {
  transform: scaleY(1);
  color: deepskyblue;
}
<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>

Upvotes: 0

Views: 2773

Answers (4)

Valera
Valera

Reputation: 2923

#box:after {
    transform: scale(0, 0);
    transform-origin: top left; /* animation will start from top left corner */
}

#box:hover::after {
    transform: scale(1, 1);
}

Origin for all corners: 

transform-origin: top right;
transform-origin: top left;
transform-origin: bottom left;
transform-origin: bottom right;

Upvotes: 2

Massimiliano Janes
Massimiliano Janes

Reputation: 5624

just change your css transform. For example, setting

translate(-50%,0%) scale(0,0);

and then

translate(0%,0%) scale(1,1);

will animate from the bottom, left corner ... of course, the pair of transformations depends both on the source corner and on the wanted initial condition of the box

Upvotes: 0

Fuross
Fuross

Reputation: 518

Use left, right, top and bottom to place the box in the corner, then reset the values to 0 on hover. Don't forget to add overflow: hidden; to your box. Here is a working example for top-right corner:

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
  	  overflow: hidden;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  	  content: "";
  	  position: absolute;
  	  bottom: 101%;
  	  left: 101%;
  	  width: 100%;
  	  height: 100%;
  	  transform-origin: bottom;
  	  background: ghostwhite;
  	  z-index: -1;
  	  transition: all 0.25s ease;
}

#box:hover::after {
  	  color: deepskyblue;
  	  bottom: 0;
  	  left: 0;
}
<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>

Upvotes: 0

Salketer
Salketer

Reputation: 15711

Use transform to position correctly the element, with rotate and translate. Then animate the height of the element to fill the square.

The size of the ::after is made to 142% is the rounded up value of the hypotenuse. Since it is bigger, it will grow out of the container so we set overflow:hidden on the container.

To change the corner from which all this happens, you need to change top,left, transform-origin and the rotate degree.

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
  overflow: hidden;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 142%;
  height: 0%;
  transform: rotate(-45deg) translateX(-50%);
  transform-origin: top left;
  background: ghostwhite;
  z-index: -1;
  transition: height 0.25s ease;
}

#box:hover::after {
  height: 142%;
  transform: rotate(-45deg) translateX(-50%);
  color: deepskyblue;
}
<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>

Upvotes: 1

Related Questions