CODEWITHSUNDEEP
htmlcssflexboxhoverdisplay
monCompte
monCompte

Reputation: 15

make appearing a flexbox on hover

I need some help with a css issue. I'm actually trying to make an animated checked-button with a double animation effet. You can see what I'm aiming at here:

https://youtu.be/rMDGeAUQ0Wc

I'm working on the appearing of the button from the right side. I decided to use flexbox associated with a hover feature so I can make appear the button on hover, but it doesn't seem to work and I don't know why.

Here's the code:

.flexbox-container {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
}

.flexbox-3 {
  display: none;
}

.flexbox-container: hover+flexbox-3 {
  display: block;
}
<div class="flexbox-container">

  <div class="flexbox-1">
    <p>text</p>
  </div>

  <div class="flexbox-2">
    <p>text</p>
  </div>

  <div class="flexbox-3">
    <p>text</p>
  </div>

</div>

Does anyone can help?

Cheers

Upvotes: 0

Views: 1496

Answers (2)

SpiceMarketer
SpiceMarketer

Reputation: 44

There are some errors in your CSS Try this

.flexbox-container:hover .flexbox-3 {
    display: block
}

however the animation will not work here because animate does not work with the display property

Upvotes: 2

Rahil Ali
Rahil Ali

Reputation: 386

try this

    .flexbox-container:hover > .flexbox-3 {
        display: block;
     }

but I think that animation will not work due to display:none block. I would prefer you to write the code this way.

 .flexbox-3 {
        position: relative;
        right: -30%;
        transition: 0.5s;
      }

      .flexbox-container:hover > .flexbox-3 {
        right: 0;
      }

if you want to move .flexbox-2 try this CSS. I add tranform: translate

     .flexbox-container {
        display: flex;
        overflow: hidden;
        justify-content: space-between;
        width: 300px;
        border: 1px solid black;
      }

      .flexbox-3 {
        position: relative;
        opacity: 0;
        right: -30%;
        transition: 0.5s;
        visibility: hidden;
      }
      .flexbox-2 {
        transform: translateX(0);
        transition: 0.5s;
      }

      .flexbox-container:hover .flexbox-3 {
        right: 0;
        opacity: 1;
        visibility: visible;
      }
      .flexbox-container:hover .flexbox-2 {
        transform: translateX(-30px);
      }

Upvotes: 1

Related Questions