CSS: Set of images move over when image1 animates out of place when they should stay where they are

Question

I'm building a CSS lightbox gallery. I want to pretty up part of its operation using CSS transition animations. What I'm attempting to do is this: When you hover over the base image, it animates with a "pulse" to let you know you can interact with it. When you click on it, it spins and zooms and fades out towards the viewer, as if it's turning into the block of information that will fade in in the lightbox that is supposed to appear. The box that comes up is not purely an image. It's a span of text with an image. Then when you click the (X) close button or click anywhere on the page, the lightbox disappears abruptly without fading out and all the original images are back in place.

What's actually happening is you click on the base image, it spins, zooms, and fades like it should, but in the background, the other images to its right slide over to take its place. Then when you click the lightbox away, everything is back in place. I don't want the other images to move over and fill where the first one was. How do I keep everything from shifting, so that when you click on image1 and it animates away, the other images stay put? This way if you click on image2, image 3, 4, and 5 etc don't slide over, or whatnot.

I'm using some Javascript to make my click animations happen, that I borrowed/learned from another Stack Overflow question that was answered. If you can find a better way to achieve what I want, please help and add it.

As a side question, how can I make the lightbox come up such that if you click on the (X) close button or outside the text box, it closes the lightbox, but if you click inside the text box, nothing happens and the lightbox stays where it is? This way people can click and highlight to copy text inside of the text box if they want.

I cannot seem to reproduce any of the click animation through the snippet code, so just so you can see what's actually happening, here's a link to the original test code on my personal web account where you can see the actual click animation and what's going wrong: http://www.cafenocturne.com/testpage/biogallery/

Here's a snippet of the code I'm working with.

$(window).load(function() {
  $(".ClickAnim").click(function() {
    $(this).addClass("rotOutZm");
    setInterval(function() {
      $(".ClickAnim").removeClass("rotOutZm");
    }, 2000);

  });

});

/* Just some base styles not needed for example to function */

*,
html {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
  height: 100%;
}
body,
form,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
body {
  background-color: #606061;
  color: WHITE;
  overflow: hidden;
}
img {
  border: none;
}
p {
  font-size: 12px;
  margin: 0 0 1em 0;
}
h2 {
  padding: 10px 0 0 20px;
}
.clear + h2 {
  padding: 0 0 0 20px;
}
.clear {
  height: 0 !important;
  line-height: 0 !important;
  clear: both !important;
  font-size: 1px !important;
  margin: 0;
  padding: 0;
  float: none !important;
}
/* animations */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*rotateOut+Zoom */

@keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
.rotOutZm {
  -webkit-transform-origin: center;
  -webkit-animation: rotOutZm forwards 1.8s;
  transform-origin: center;
  animation: rotOutZm forwards 1.8s;
}
/* pulse */

@-webkit-keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* fadeIn */

@-webkit-keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn1 {
  -webkit-animation-name: fadeIn1;
  animation-name: fadeIn1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
/* Bio styles */

ul {
  padding: 20px 0 20px 20px;
  float: left;
}
ul li {
  display: inline-block;
  float: left;
  list-style: none;
  margin: 0 10px 0 0;
}
.pulse1:hover {
  -webkit-animation: pulse1 0.8s;
  /* Safari 4+ */
  -moz-animation: pulse1 0.8s;
  /* Fx 5+ */
  -o-animation: pulse1 0.8s;
  /* Opera 12+ */
  animation: pulse1 0.8s;
  /* IE 10+, Fx 29+ */
}
ul li img,
ul li label {
  display: block;
  cursor: pointer;
}
ul li input {
  display: none;
}
ul li input:checked + .overlay {
  display: table;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
}
.overlay label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.overlay img {
  display: inline;
  border: none;
  padding: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: WHITE;
}
.overlay label > img,
.content01 {
  border: 1px solid GRAY80;
  -moz-box-shadow: 5px 5px 10px BLACK;
  -webkit-box-shadow: 5px 5px 10px BLACK;
  box-shadow: 5px 5px 10px BLACK;
}
.content01 {
  display: block;
  width: 460px;
  padding: 20px;
  background: WHITE;
  color: BLACK;
  margin: 0 auto;
  text-align: left;
  cursor: auto;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.content01 .inner_content {
  display: block;
  height: 500px;
  overflow-y: auto;
}
.content01 .inner_content span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.overlay .inner_content {
  height: 265px;
}
.content01 img:first-child {
  float: left;
  display: block;
  margin: 0 10px 0 0;
}
.content01 img {
  float: right;
  margin: 0 10px;
  padding: 0;
}
input[id^='bio'] {
  cursor: pointer;
  height: 265px;
}
.content02 {
  width: 820px;
  padding: 0;
}
#close {
  display: none;
}
.closebutton {
  background: #606061;
  color: #FFFFFF;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -12px;
  width: 24px;
  border: 2px solid;
  border-color: #c18c8b #c05a58 #cc514e #a67776;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -moz-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -webkit-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
}
.closebutton:hover {
  background: #f43530;
  text-shadow: 1px 1px 1px GRAY80;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<body>

  <h2>Static Content</h2>

  <ul>
    <li>
      <label class="animated pulse1" for="bio">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Hideto" />
      </label>
      <input type="radio" id="bio" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
                            <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
    <li>
      <label class="animated pulse1" for="bio2">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Kieran" />
      </label>
      <input type="radio" id="bio2" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
							<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>OTHER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
  </ul>
  <div class="clear">&nbsp;</div>
  <input type="radio" id="close" name="Staff" />
</body>

</html>

Answer 1

I have dabbled on your link. If you put a width and height (same width and height of image) on the that is wrapping the image it will keep the space there, instead of moving the next image in its place.

ul li label{
    width: 100px;
    height: 102px;
}