Zoom background image

Question

I have a html/css block which displays an image and overlays a color <div> and a text.

I would like to make the background <img> to be able to zoom without extending over the container (bootstrap col).

I have tried adding a new class with jQuery using mouseenter and mouseleave events and using CSS max-width and max-height in the img element but the image stills extends beyond the container when zoomed.

Any tips?

<script>
$(document).ready(function(){
  $(".category").mouseenter(function(){
    $(this).prevAll('img').first().addClass("img-category-zoom");
  });
  $(".category").mouseleave(function(){
    $(this).prevAll('img').first().removeClass("img-category-zoom");
  });

});
</script>

<style>
.category {
  position: absolute;
  top: 0px; left: 0px;
  z-index: 3;
  width: 100%; height: 100%;
  background: rgba(172, 44, 48, 0.85);
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(172, 44, 48, 0);
}
.category:hover {
  border-style: solid;
  border-width: 1px;
  border-color: white;
}
.img-category {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  transition: all 0.5s ease;
}
.img-category-zoom {
  transform: scale(1.2);
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page">
<div class="container-fluid">
  <div class="content row">
    <div class="no-padding col-lg-6 col-md-6 col-sm-6 col-xs-6 even">
      <img src="http://via.placeholder.com/50x50" alt="" class="img-category img-responsive">
      <div class="category">OVERLAY</div>
    </div>
  </div>
</div>
</div>

Just add `overflow:hidden` to parent div – Tan Duong Apr 19 '18 at 04:47 — Tan Duong, Apr 19 '18 at 04:47

score 1 · Accepted Answer · answered Apr 19 '18 at 04:47

You could add overflow: hidden to the container div

$(document).ready(function(){
  $(".category").mouseenter(function(){
    $(this).prevAll('img').first().addClass("img-category-zoom");
  });
  $(".category").mouseleave(function(){
    $(this).prevAll('img').first().removeClass("img-category-zoom");
  });

});

.category {
  position: absolute;
  top: 0px; left: 0px;
  z-index: 3;
  width: 100%; height: 100%;
  background: rgba(172, 44, 48, 0.85);
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(172, 44, 48, 0);

}
.category:hover {
  border-style: solid;
  border-width: 1px;
  border-color: white;

}
.img-category {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  transition: all 0.5s ease;
 
}
.img-category-zoom {
  transform: scale(1.2);
  
}
/* Add this */
.col-lg-6, .col-md-6, .col-sm-6, .col-xs-6 {
  overflow: hidden;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page">
<div class="container-fluid">
  <div class="content row">
    <div class="no-padding col-lg-6 col-md-6 col-sm-6 col-xs-6 even">
      <img src="http://via.placeholder.com/50x50" alt="" class="img-category img-responsive">
      <div class="category">OVERLAY</div>
    </div>
  </div>
</div>
</div>

Do not use transition: all, it will cause a performance issue, refer to this thread https://stackoverflow.com/questions/8947441/css3-transitions-is-transition-all-slower-than-transition-x — Alfrex92, Apr 19 '18 at 05:52

Zoom background image

1 Answers1