POC Zoomed BS modal image

In this example below you will see how to do a POC Zoomed BS modal image with some HTML / CSS and Javascript

Lazyloaded images that can be zoomed on click with a Bootstrap 3 modal

This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>POC Zoomed BS modal image</title>
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">



  <div class="foo js-lazyload" data-original="http://www.placecage.com/g/800/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>

<div class="foo js-lazyload" data-original="http://www.placecage.com/g/700/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>

<div class="foo js-lazyload" data-original="http://www.placecage.com/g/600/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>

<div class="foo js-lazyload" data-original="http://www.placecage.com/g/500/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>

<!-- Modal template -->
<div class="modal modal--zoom fade js-modal-zoom" id="modal-zoom">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <div class="modal-body">
        <div class="modal-img"></div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/tibomahe/poc-zoomed-bs-modal-image-mEbONM */
.foo {
  height: 300px;
  width: 300px;
  position: relative;
  float: left;
.foo .icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity, 0.4s;
  z-index: 1;
.foo:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity, 0.4s;
.foo:hover {
  cursor: pointer;
.foo:hover .icon {
  opacity: 1;

.js-lazyload {
  background-size: cover;
  background-position: 50% 50%;

.modal--zoom .modal-content {
  border: none;
  background: transparent;
  box-shadow: none;
.modal--zoom .modal-content .modal-header {
  border: none;
  padding: 0 15px;
.modal--zoom .modal-content .modal-header .close {
  color: white;
  opacity: 1;
  font-weight: 400;
.modal--zoom .modal-img {
  width: 100%;
  height: 500px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;

/*Downloaded from https://www.codeseek.co/tibomahe/poc-zoomed-bs-modal-image-mEbONM */
Dependencies :
- jQuery
- jQuery lazyload
- Bootstrap.js (modal)

  effect: 'fadeIn',
  threshold: 50,

//Dynamically update content of modal
$('.js-modal-zoom').on('show.bs.modal', function (event) {
  var img = $(event.relatedTarget).attr('data-original');
  var modal = $(this)
  modal.find('.modal-img').css('background-image', 'url(' + img + ')');