How to achieve this when I hover an flex item?

user_13516882 0
Viewed 567

I have searched all over stack overflow but I am unable to find any clue and I am struck here. I used flex container and child items in my code to some extent but I couldn't move beyond that. Thing is when we hover a child item, a new child item need to be created as shown in the expected result. Should we need to use pseudo element or any other flex properties to achieve this. Thanks much in advance.

My code:

https://jsfiddle.net/k2qr398u/1/

My result

https://imgur.com/kRHNHuu

Expected result:

https://imgur.com/2B6CkYF

/**CSS**/

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  background-color: #400017;
}

.img-css {
  width: 50px;
  height: 50px;
}

.main-heading {
  display: block;
  text-align: center;
  color: #fc065d;
  margin-bottom: 70px;
}

.img-js {
  width: 50px;
  height: 50px;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border: 3px solid #360310;
  max-width: 610px;
  height: 310px;
  text-align: center;
  margin: 0 auto;
  flex-direction: row;
  /* transform: translate(-50%,-50%); */
}

.col {
  width: 130px;
  height: 100px;
  margin: 0 auto;
  border: 3px solid #5e0a1f;
  padding-top: 44px;
  padding-left: 26px;
  padding-right: 26px;
  color: #fff;
  background-color: #010001;
  border-radius: 30px;
  z-index: 20;
  /* position: relative; */
}

.col p {
  font-size: 16px;
  font-weight: bold;
}

.col-2 p {
  position: relative;
  top: 55px;
  text-align: center;
  font-weight: bold;
}
<!--**HTML**-->

<body>

  <div class="container">
    <div class="col col-1">
      <img src="images/css.svg" alt="CSS logo" class="img-css">
      <br>
      <p>I am</p>
    </div>

    <div class="col col-2">

      <p class="my-name">Sri</p>

    </div>

    <div class="col col-3">
      <img src="images/javascript.svg" alt="JS logo" class="img-js">
      <p>Developer
      </p>
    </div>

  </div>
</body>

P.S: Sorry if this question sounds very silly or dumb, I am a beginner trying to learn web dev skillsets.

css html
2 Answers

I have created something similar to your expected result. Please run the code snippet for the result.

UPDATE: To include the hover off transition.

/**CSS**/

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  background-color: #400017;
}

.img-css {
  width: 50px;
  height: 50px;
}

.main-heading {
  display: block;
  text-align: center;
  color: #fc065d;
  margin-bottom: 70px;
}

.img-js {
  width: 50px;
  height: 50px;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border: 3px solid #360310;
  max-width: 610px;
  height: 310px;
  text-align: center;
  margin: 0 auto;
  flex-direction: row;
  /* transform: translate(-50%,-50%); */
}

.col {
  width: 130px;
  height: 100px;
  margin: 0 auto;
  border: 3px solid #5e0a1f;
  padding-top: 44px;
  padding-left: 26px;
  padding-right: 26px;
  color: #fff;
  background-color: #010001;
  border-radius: 30px;
  z-index: 20;
  position: relative;
}

.col p {
  font-size: 16px;
  font-weight: bold;
}


/*
.col-2 p {
  position: relative;
  top: 55px;
  text-align: center;
  font-weight: bold;
}
*/

.col-1,
.col-2-1,
.col-2-2,
.col-3 {
  position: absolute;
  left: 0;
  top: 0;
  transition: 1s;
}

.wrapper {
  position: relative;
}

.wrapper:hover .col-1 {
  transition: 1s;
  left: -200px;
}

.wrapper:hover .col-2-1 {
  transition: 1s;
  top: -170px;
}

.wrapper:hover .col-2-2 {
  transition: 1s;
  top: 170px;
}

.wrapper:hover .col-3 {
  transition: 1s;
  left: 200px;
}
<!--**HTML**-->

<body>

  <div class="container">
    <div class="wrapper">
      <div class="col"> Underneath</div>
      <div class="col col-1">
        <img src="images/css.svg" alt="CSS logo" class="img-css">
        <br>
        <p>I am</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="col"> Underneath</div>
      <div class="col col-2-1">
        <p class="my-name">Sri</p>
      </div>
      <div class="col col-2-2">
        <p class="my-name">Pratham</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="col"> Underneath</div>
      <div class="col col-3">
        <img src="images/javascript.svg" alt="JS logo" class="img-js">
        <p>Developer
        </p>
      </div>
    </div>

  </div>
</body>

user_76530070

The idea is:

  1. Overlay some content over main content.
  2. On hover reveal it :)

.card {
  width: 150px;
  height: 80px;
  border: 1px solid #999;
  background: #ccc;
  border-radius: 8px;
  position: relative;
  margin: 20% auto;
}

.card:hover > .o-top {
  top: -80px;
  background: #f00;
}

.card:hover > .o-bottom {
  bottom: -80px;
}

.o-top {
  top: 0;
  transition: top 1.5s, background 2s;
}

.o-bottom {
  bottom: 0;
  transition: bottom 1.5s, background 2s;
}

.card-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #333;
  pointer-events: none;
  color: #fff;
}
<div class="card">
  <div class="card-overlay o-top">TOP OVERLAY</div>
  <div class="card-overlay o-bottom">BOTTOM OVERLAY</div>
  <H3>INTERNAL CONTENT</H3>
</div>

user_79729330
Related