showCase fiddle

by Cagger

HTML

<div class="container">
  <div id="firstBox" class="boxes">
    <h2>
    Box 1
    </h2>
    <p class="display-to-none">
    Hello World!
    </p>
  </div>
  <div id="secondBox" class="boxes">
    <h2>
    Box 2
    </h2>
    <p class="display-to-none">
    Hello World!
    </p>
  </div>
  <div id="thirdBox" class="boxes">
    <h2>
    Box 3
    </h2>
    <p class="display-to-none">
    Hello World!
    </p>
  </div>
</div>

CSS

/* showCase CSS */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.display-to-none {
  display: none;
}

.close {
  position: absolute;
	right: 0;
	top: 0;
	background-color: black;
	color: white;
  cursor: pointer;
}

/* showCase CSS end */

/* custom CSS - Arbitrarily */

/* Use classes for positioning purposes */

.container::after {
  content: "";
  clear: both;
  display: table;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
}

.boxes {
  width: 100px;
  height: 100px;
  margin-left: 20px;
  margin-top: 20px;
  float: left;
}

/* Use your style customization on ID's since all of classes are removed on cloning */

#firstBox {
  background-color: red;
}

#secondBox {
  background-color: yellow;
}

#thirdBox {
  background-color: green;
}

#firstBox p, #secondBox p, #thirdBox p {
  font-size: 1.5em;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

$(document).ready(function() {

	// Prevents multiple openings
	var counter = 0;
  
	// speed = animation speed
	$.fn.showCase = function(speed) {

		// clones item
    // upon cloning removes all classes so it will not interfere with final positioning - Use all positioning CSS on classes and styling on ID's
		var clone = $(this).clone().prependTo($(this).parent()).removeAttr("class").addClass("center display-to-none");
		// makes sure no other element is displayed
		if (counter === 0) {

			// Element growing animation
			clone.removeClass("display-to-none");
			clone.css({
				width: "0",
				height: "0",
				zIndex: "1000"
			});
      
      // shows all hidden elements inside parent element. 
			clone.find("*").removeClass("display-to-none");
			close = clone.prepend("<div class='close'>X</div");
			clone.animate({
				width: $(this).parent().width() - 50, // Set width of element based on width of parent element
        
				height: $(this).parent().height() - 50, // Set height of elementbased on height of parent element
        
			}, speed);
			counter = 1;
		}
		// On X click close cloned element and remove it
		$(".close").click(function() {
			clone.animate({
				width: "0",
				height: "0",
			}, speed);
			setTimeout(function() {
				clone.remove();
			}, speed);
			counter = 0;
		});
		return this;
	};
  
  $("#firstBox").click(function() {
  	$("#firstBox").showCase(1500);
  });
  
  $("#secondBox").click(function() {
  	$("#secondBox").showCase(1500);
  });
  $("#thirdBox").click(function() {
  	$("#thirdBox").showCase(1500);
  });
});