HTML & CSS, zoom image inside its container on hover-CodePudding

At the moment, the image zooms over the black text container. How can I prevent this? I only want the image to zoom in its own container and not overlay the black div container.

Here is a JSFiddle and my code:

.cms-section-default.boxed [class*="cms-element"] {
  border-radius: 3px;
}

.body-selection-item {
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.8em 0.5em 0.2em 0.5em;
  text-align: center;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: white;
  border: 1px solid #b2b2b2;
}

.body-selection-item-image:hover {
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.body-selection-item-image {
  overflow: hidden;
  transition: -ms-transform .5s ease;
  transition: -webkit-transform .5s ease;
  transition: transform .5s ease;
  -webkit-transition: -webkit-transform .5s ease;
}

.body-selection-item-image {
  height: 15rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.body-selection-item-text {
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0.5em;
  background: #1f1f1f;
  color: #fff;
}

<div >
  <div >
    <a title="Ttile" href="#">
      <div style="background-image:url(https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80);" ></div>
      <div >MY TEXT-BOX</div>
    </a>
  </div>
</div>

CodePudding user response：

This well known animation is commonly done by zooming an img inside an element with a overflow: hidden. As overflow:hidden is for the content of an element and does not prevent him from getting bigger. Try this:

.cms-section-default.boxed [class*="cms-element"] {
  border-radius: 3px;
}
.body-selection-item {
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.8em 0.5em 0.2em 0.5em;
  text-align: center;
  flex-grow: 1;
  background-color: white;
  border: 1px solid #b2b2b2;
}

.body-selection-item-image {
  overflow: hidden;
  height: 15rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.body-selection-item-image:hover img {
  transform: scale(1.05);
}

.body-selection-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.body-selection-item-text {
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0.5em;
  background: #1f1f1f;
  color: #fff;
}

<div >
  <div >
    <a title="Deckenleuchten" href="/Leuchten/Deckenleuchten/">
      <div >
        <img src="https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80" />
      </div>
      <div >MY TEXT-BOX</div>
    </a>
  </div>
</div>

CodePudding user response：

You can achieve this by using z-index property but to have this working, you need to add position property too.

So add

z-index: 1000;
position: relative;

to .body-selection-item-text

.cms-section-default.boxed [class*="cms-element"] {
    border-radius: 3px;
}
.body-selection-item {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.8em 0.5em 0.2em 0.5em;
    text-align: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-color: white;
    border: 1px solid #b2b2b2;
}
.body-selection-item-image:hover {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.body-selection-item-image {
    overflow: hidden;
    transition: -ms-transform .5s ease;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transition: -webkit-transform .5s ease;
}
.body-selection-item-image {
    height: 15rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
}
.body-selection-item-text {
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5em;
    background: #1f1f1f;
    color: #fff;
    position: relative;
    z-index: 1000;
}

<div >
  <div >
    <a title="Deckenleuchten" href="/Leuchten/Deckenleuchten/">
    <div style="background-image:url(https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80);" ></div>
    <div >MY TEXT-BOX</div>
    </a>
  </div>
</div>