CODEWITHSUNDEEP
htmlcss
OscarDev
OscarDev

Reputation: 977

Background on hover is bigger than container

I am making a box that on hover the background changes to an image which I have achieved but that image leaves the container.

.single-service {
  background-color: #fff;
  border: 1px solid #eceff8;
  border-radius: 5px;
  padding: 25px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single-service:hover {
  -webkit-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);
  -moz-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);
  box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);
  background: transparent;
}

.single-service:hover>.bg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/slider.jpg') no-repeat center center;
  opacity: .8;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 5px;
}
<div class="col-lg-4 col-md-4 col-sm-8">
  <div class="single-service text-center mt-30">
    <div class="bg"></div>
    <div class="service-icon">
      <div class="icon-container">
        <i class="lni-tshirt"></i>
      </div>
    </div>
    <div class="service-content">
      <h4 class="service-title"><a href="#">LAVANDERÍA</a></h4>
      <p>SERVICIO PROFESIONAL DE LAVANDERÍA.</p>
    </div>
  </div>
</div>

I don't understand why the on-hover fund goes out of the box where it is positioned, I hope you can help me. Thank you.

enter image description here

Upvotes: 0

Views: 178

Answers (2)

Nadeem Ahmad
Nadeem Ahmad

Reputation: 745

Simply add position: relative; and overflow: hidden to your .single-service element.

Because of the .bg uses position: absolute;.

Upvotes: 1

Nathan Dawson
Nathan Dawson

Reputation: 19308

Your background element uses absolute positioning. It's parent, .single-service, doesn't have a position value set therefore it's defaulting to static.

The background element is positioned relative to its closest containing block. You're expecting that to be .single-service when in reality it appears to be the columns one level higher.

Add position: relative to .single-service.

.single-service {
    . . .
    position: relative;

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

Upvotes: 1

Related Questions