Zooming fade image with title inside

tosailboatexperience 0
Viewed 16

I have tried to do a hover zooming fade image with html and css but when we hover the mouse over the title the zooming image doesnt work..

    <div class="col-lg-4 col-md-6" style="position: absolute; left: 380px; top: 0px; 
     padding: 0px 12px 0px;">
      <div class="wrap">
        <a href="#">
          <img src="assets/img/portfolio/sailing-yacht.jpg" class="img-fluid" 
           alt="boat charter marbella">
          <div class="titulo">
            <h4>Sailing Yachts</h4>
        </div>
        </a>            
      </div>
    </div>

This is the css code but i dont know whats wrong with it..

/----- css yacht choice --------/

   .yacht-choice .container{ 
    position: relative;
    height: 300px;
    }       
   .yacht-choice .container .wrap{       
   position: relative;
   overflow: hidden;
   z-index: 1;
   background: rgba(17, 17, 17, 0.6);
   }
  .yacht-choice .container .wrap img {
   position: relative;
   display: block;
   margin: 0 auto;
   transition: all ease-in-out 0.3s;
   }
  .yacht-choice .container .wrap .titulo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   }
  .yacht-choice .container .wrap:hover::before{
   opacity: 1;
   }
  .yacht-choice .container .wrap img:hover { 
   opacity: 0.7; 
   transform: scale(1.2);
   }
  .yacht-choice .container .wrap h4 {
   font-size: 25px;
   color: #fff;
   font-weight: 700;
   text-shadow: 0 3px 6px rgb(0 44 56 / 70%);
   }

Thanks for any help in advance...

zooming fade image css html
1 Answers

It does work, when you include the proper html that contains some of the CSS classes you mentioned. Or remove those classes. But I'm not sure this is the proper way it should work. Try making a minimal reproducible example. What I've tried to do here:

.wrap {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(17, 17, 17, 0.6);
}

.wrap img {
  position: relative;
  display: block;
  margin: 0 auto;
  transition: all ease-in-out 0.3s;
}

.wrap .titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrap:hover::before {
  opacity: 1;
}

.wrap:hover img {
  opacity: 0.7;
  transform: scale(1.2);
}

.wrap h4 {
  font-size: 25px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 3px 6px rgb(0 44 56 / 70%);
}
<div class="col-lg-4 col-md-6" style="position: absolute; left: 0; top: 0px; 
     padding: 0px 12px 0px;">
  <div class="wrap">
    <a href="#">
      <img src="https://picsum.photos/200" class="img-fluid" alt="boat charter marbella">
      <div class="titulo">
        <h4>Sailing Yachts</h4>
      </div>
    </a>
  </div>
</div>

Update: effect fixed by changing

.wrap img:hover

to:

.wrap:hover img
IT goldman0
Related