CODEWITHSUNDEEP
htmlcss
Franco
Franco

Reputation: 862

CSS hover Slider - Unable to complete

I want to do the following hover slider:

enter image description here

The blue part should slide from left to right when hovered on the red part. It should slide from the right part of the red part and not showing (i.e. should be sliding behind the red part). Blue part should initially be hidden behind the red and should not show at all The blue part will be bigger than the red part so it had to be hidden with overflow or something else. There should be no opacity transitioning, however other transitioning is acceptable

This is what I have thus far:

HTML:

<div class="container">
  <div class="static-content">
  </div>
  <div class="overlay">
    OverLay Content - this will be some text
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 200px;
  height: 100px;

  .static-content {
    display: block;
    background-color: red;
    width: 100%;
    height: 100%;
  }

  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #008CBA;
    height:100%;
    width: max-content;
    transition: .5s ease;
  }
}

.container:hover .overlay {
  transform: translateX(100%);
  height: 100%;
}

Problem is blue part is infront of red part.

Upvotes: 0

Views: 107

Answers (2)

yahya yasser
yahya yasser

Reputation: 46

add this to .overlay element z-index: -1; to make it behind the red div

and if the red div is smaller so it doesnt hide it all then u can but transparent colored div at the part that u want to hide since u dont want to do it with overflow

Upvotes: 1

Abolfazl
Abolfazl

Reputation: 11

You can give your blue div style a z-index to take it under the red one like this :

.overlay {
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      background-color: #008CBA;
      height:100%;
      width: max-content;
      transition: .5s ease;
    }

Upvotes: 1

Related Questions