How to make "main content" move on "hover" and keep before/after pseudo-element static?

user_17192013 0
Viewed 177

The ideia is to make the "support" button move out of the initial position while a black background remains at the same spot.

P.S.: This is only the second time I use this website. Im sorry if I didn't the most suitable layout here and thank you very much for you time and help!!

div {
  width: 60vw;
  margin: 100px auto;
  position: relative;
}

.test {
  background-color: rgb(202, 129, 27);
  display: block;
}

.test::before {
  content: "";
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 0px;
  left: 0px;
  z-index: -1;
  transition: all 0.5s linear;
}

.test:hover::before {
  top: 20px;
  left: 20px;
  background-color: black;
}

.test:hover {
  top: 0px;
  left: 0px;
}
<div class="test">
      <i class="fas fa-users fa-4x"></i>
      <h3>Support</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nemo
        quisquam iste aliquam nam nesciunt tempore consectetur quaerat libero
        impedit.
      </p>
    </div>

css html
1 Answers

Try this:

<style>
    .shadow {
        background-color: black;
        border-radius: 7px;
        width: fit-content;
        min-width: 300px;
        position: relative;
        left: 200px;
        top: 100px;
        font-family: 'Courier New', Courier, monospace;
    }
    
    .button {
        background-color: orange;
        position: relative;
        right: 0px;
        bottom: 0px;
        padding: 20px;
        border-radius: 7px;
        width: 300px;
        transition: all 0.5s ease;
    }
    
    .button:hover {
        position: relative;
        right: 40px;
        bottom: 40px;
    }
</style>

<body>
    <div class="shadow">
        <div class="button">
            <h3 class="text">Title</h3>
            <p>Consectetur sit est dolor quis do occaecat nostrud culpa dolor. Occaecat aute qui anim dolore proident. Cupidatat consequat esse ex ex. Velit fugiat sint in excepteur ut duis excepteur enim reprehenderit fugiat laborum laborum excepteur. Sunt
                dolore tempor id dolor voluptate adipisicing consequat nulla amet cupidatat commodo.</p>
        </div>
    </div>
</body>

What I did was make two div's, and move the top one.

user_152252670
Related