skip to Main Content

I have this box with a image and when mouse hover, the box grows to show a text. I’m having troubles with all other page elements moving together. position: absolute or fixed don’t work. Is it possible to not move the page using only CSS? Sorry for english troubles.

.aboutme {
  padding-top: 15%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 500px;
  margin-left: 40px;
  background: #141414;
  transition: 0.5s;
  font-family: consolas;
}

.box:hover {
  height: 400px;
}

.box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.bio {
  background: linear-gradient(235deg, #0c0c0c, #161616);
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  font-size: 20px;
  font-family: consolas;
  max-width: 40%;
}
<div class="aboutme">
  <div class="box">
    <div class="imgBx" id="aboutme">
      <img src="me.jpg">
    </div>
    <div class="content">
      <h2>Raul Souza<br><span>Computer Scientist</span></h2>
    </div>
  </div>
  <section class="bio">
    ..generic text and images..
  </section>
</div>

prints:
before move
and
after move

2

Answers


  1. Give a fixed height to the .aboutme div and I added code to show the text on hover.

    .aboutme {
        padding-top: 15%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height:350px;
        background-color:#333;
        padding:25px;
    }
    
    .box {
        position: relative;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #141414;
        transition: 0.5s;
        font-family: consolas;
    }
    
    .box:hover {
        height: 400px;
    }
    
    .box .imgBx {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .content{
        display:none;
        color:white;
    }
    
    .box:hover .content{
        display:block;
    }
    
    .bio {
        background: linear-gradient(235deg, #0c0c0c, #161616);
        border-radius: 10px;
        padding: 20px;
        color: #fff;
        font-size: 20px;
        font-family: consolas;
        max-width: 40%;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <body>
            <div class="aboutme">
            <div class="box">
                <div class="imgBx" id="aboutme">
                    <img src="me.jpg">
                </div>
                <div class="content">
                    <h2>Raul Souza<br><span>Computer Scientist</span></h2>
                </div>
            </div>
            <section class="bio">
                ..generic text and images..
            </section>
        </div>
        </body>
    </html>
    Login or Signup to reply.
  2. You can use transform: scaleY(...); instead of changing the height value on hover, in your case (300 to 400px height) that would be transform: scaleY(1.33);:

    .aboutme {
      padding-top: 15%;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
    }
    
    .box {
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 500px;
      margin-left: 40px;
      background: #141414;
      transition: 0.5s;
      font-family: consolas;
    }
    
    .box:hover {
      transform: scaleY(1.33);
    }
    
    .box .imgBx {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    
    .bio {
      background: linear-gradient(235deg, #0c0c0c, #161616);
      border-radius: 10px;
      padding: 20px;
      color: #fff;
      font-size: 20px;
      font-family: consolas;
      max-width: 40%;
    }
    <div class="aboutme">
      <div class="box">
        <div class="imgBx" id="aboutme">
          <img src="me.jpg">
        </div>
        <div class="content">
          <h2>Raul Souza<br><span>Computer Scientist</span></h2>
        </div>
      </div>
      <section class="bio">
        ..generic text and images..
      </section>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search