When hover on card how to scale card image without overlapping-CodePudding

I would like to scale my header card image but to not overlap over header title.

How can we manage that? THanks.

html

<div >
            <div ></div>
            <div >
                <h3>Banana</h3>
                
              <p>
                Lorem ipsum
              </p>
                </div>
        </div>

css


main {
    width: 80%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 30px auto;
    padding: 30px 0;
}

.single-box {
    flex-direction: column;
    align-self: center;
    width: 270px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    border-radius: 10px 10px 10px 10px;
    margin: 30px 0;
    overflow: hidden;
    /* max-height: 100%; */
}

.header-area.img1 {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjNSVKfWJh2gqMd3ClC-pfA8MX9X34oOP8rX-psZvYcNrrZA2l1AGCP_mIG0MVZl6hj6A&usqp=CAU);
    object-fit: contain;
    width: 100%;
}


.header-area {
    background-size: cover;
    /* padding: 100px 30px; */
    height: 200px;
    background-position: center center;
    border-radius: 10px 10px 50% 0;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
    transform: scale(1);
    transition: all .3s;  
    /* position: relative; */
    /* max-height: 100%; */
    /* overflow: hidden; */

}

.header-area.img1:hover {
  transform: scale(1.3);
  transition: all .5s;
  cursor: pointer;
}

.body-area {
    padding: 10px 15px;
    /* overflow: hidden; */
}

CodePudding user response：

Add the following CSS:

.body-area {
  position: relative;
  z-index: 1;
  background-color: white;
}

See the snippet below.

main {
  width: 80%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 30px auto;
  padding: 30px 0;
}

.single-box {
  flex-direction: column;
  align-self: center;
  width: 270px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  border-radius: 10px 10px 10px 10px;
  margin: 30px 0;
  overflow: hidden;
  /* max-height: 100%; */
}

.header-area.img1 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjNSVKfWJh2gqMd3ClC-pfA8MX9X34oOP8rX-psZvYcNrrZA2l1AGCP_mIG0MVZl6hj6A&usqp=CAU);
  object-fit: contain;
  width: 100%;
}

.header-area {
  background-size: cover;
  /* padding: 100px 30px; */
  height: 200px;
  background-position: center center;
  border-radius: 10px 10px 50% 0;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
  transform: scale(1);
  transition: all .3s;
  /* position: relative; */
  /* max-height: 100%; */
  /* overflow: hidden; */
}

.header-area.img1:hover {
  transform: scale(1.3);
  transition: all .5s;
  cursor: pointer;
}

.body-area {
  padding: 10px 15px;
  /* overflow: hidden; */
}

.body-area {
  position: relative;
  z-index: 1;
  background-color: white;
}

<div >
  <div ></div>
  <div >
    <h3>Banana</h3>
    <p>
      Lorem ipsum
    </p>
  </div>
</div>

CodePudding user response：

Create a child div for header-area and place the image in it. Try like below code

html

   <div >
        <div ></div>
   </div>

CSS

.header-area {
    background-size: cover;
    height: 180px;
    background-position: center center;
    border-radius: 10px 10px 50% 0;
    transform: scale(1);
    transition: all .3s;  
    overflow: hidden;

}
.header-area .img1{
  /* your image */
  width:100%;
  height:100%;
  object-fit:content
  }
.header-area .img1:hover {
  transform: scale(1.3);
  transition: all .5s;
  cursor: pointer;
}

Don't forget to Set the width and height for the image to 100%