CODEWITHSUNDEEP
csscss-transitionsreverse
tcaissie
tcaissie

Reputation: 83

CSS Transition: Making it go from Right to Left, instead of Left to Right

I'm trying to create a special box effect, but I'm having some difficulties understanding how I'm supposed to make a slowly appear (transition property in CSS) from the Right to the Left, instead of the usual Left to the Right.

Here is some code:

.box {        
  display: block;
  margin: 3em;
  width: 360px;
  height: 420px;
  border: 1px solid #333;
  text-align: center;
}

.slice-mid {
  position: absolute;
  margin: 0;
  top: 370px;
  width: 0px;
  height: 140px;
  background-color: white;
  z-index: 2;
  visibility: hidden;
}

.box:hover .slice-mid {
  visibility: visible;
  width: 360px;
  transition: 1.3s ease-in-out;
}
<div class="box">
    <div class="bg-img"></div>
    <div class="slice-top"></div>
    <div class="slice-mid"></div>
    <div class="slice-bot"></div>
  </div>

I got a background image, upon which three blocks will appear on hover to cover the entirety of the image. They must come from different points of origin, by odd numbers, so say top box goes left to right, mid box from right to left, bottom box from left to right. You catch the drift. I'm having a problem with the middle box.

Upvotes: 2

Views: 4494

Answers (1)

Sensoray
Sensoray

Reputation: 2430

You need to make .slice-mid be positioned absolutely to the right. That way when it expands, it can only expand left. Put position:relative; on the .box so that way the slice will be positioned according to its parent.

.box {        
  display: block;
  margin: 3em;
  width: 360px;
  height: 420px;
  border: 1px solid #333;
  text-align: center;
  position:relative;
}

.slice-mid {
  position: absolute;
  margin: 0;
  top: 370px;
  width: 0px;
  right:0px;
  height: 140px;
  background-color: white;
  z-index: 2;
  visibility: hidden;
}

.box:hover .slice-mid {
  visibility: visible;
  width: 360px;
  transition: 1.3s ease-in-out;
}
<div class="box">
    <div class="bg-img"></div>
    <div class="slice-top"></div>
    <div class="slice-mid"></div>
    <div class="slice-bot"></div>
</div>

Upvotes: 2

Related Questions