EN VI

Html - Zoom In Zoom Out image with title Outside?

How to Html - Zoom In Zoom Out image with title Outside

I am trying to add Zoom In & Out effect on Image when we hover over the Image & Title. Currently it's only working when I hover over the Image, & it doesn't work when I hover over the Title.

So, basically I want it to work in both cases, i.e. on hover over Image & on hover over Title.

I am adding my Html and Css below for your reference.

NOTE: I can't make any changes in the HTML because of some restrictions, so kindly help me to solve this issue with making changes in CSS only.

CSS:

<style>
.country_list_container {
  position: relative !important;
}

.country_list_image img {
  display: block !important;
  margin: 0 auto !important;
  transition: all ease-in-out 0.3s !important;
}

.country_list_image:hover img {
  transform: scale(1.2) !important;
}

.country_list_title {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
</style>

HTML:

<div class="col-lg-4 col-md-6 country_list_container">
  <div class=" country_list_image">
    <a href="#">
      <img src="https://picsum.photos/200" class="img-fluid" alt="boat charter marbella">
    </a>
  </div>
  <div class="country_list_title">
      <h2><a href="#">IMAGE TITLE</a></h2>
  </div>
</div>

Solution:

Simply add pointer-events: none to the title. So that the element is never the target of pointer events.

.country_list_container {
  position: relative !important;
}

.country_list_image img {
  display: block !important;
  margin: 0 auto !important;
  transition: all ease-in-out 0.3s !important;
}

.country_list_image:hover img {
  transform: scale(1.2) !important;
}

.country_list_title {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none; /*NEW*/
}

<div class="col-lg-4 col-md-6 country_list_container">
  <div class=" country_list_image">
    <a href="#">
      <img src="https://picsum.photos/200" class="img-fluid" alt="boat charter marbella">
    </a>
  </div>
  <div class="country_list_title">
    <h2><a href="#">IMAGE TITLE</a></h2>
  </div>
</div>