Develop Reference

Animated hamburger navigation

I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.
Here's what I'm working with;
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.
Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.
Thanks in advance.

You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
menuIcon.classList.toggle("toggle")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* Menu icon */
.menu-icon {
cursor: pointer;
position: absolute;
z-index: 1;
}
.menu-icon div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
transition: all .4s ease;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
</body>
</html>
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
icon.classList.toggle("open")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* NAV ICON */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon {
width: 30px;
height: 25px;
position: absolute;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1;
top: 30px;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>

How do I add a mouseover event to an image

I am trying to create a mouseover event that would turn my images background to black while adding text that would describe the link to another web-page. But everything that I have tried either in CSS or JavaScript does not work and I get errors, not sure how to fix the problem?
var one = document.getElementById("one");
addEventListner("mouseover", link);
addEventListner("mouseout", linkOut);
function link() {
one.style.backgroundColor = "black";
one.textContent = "Our Games";
one.style.textAlign = "center";
one.style.verticalAlign = "middle";
}
function linkOut() {
one.style.backgroundColor = "";
one.textContent = "";
}
This is my my CSS, I think that the overlay option is not working
do to the grid that I have set up for my images. But I am
not quit sure why it wont work.
#dragon {
height: 200px;
}
#chaos {
height: 600px;
}
#logo {
height: 150px;
}
#thunder {
height: 600px;
}
#dice {
height: 235px;
}
h1 {
color: white;
text-align: center;
padding: 32px;
padding-bottom: 0px;
}
/*--------------grid for my images--------------------------*/
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: black;
}
.row {
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 33.33%;
flex: 33.33%;
max-width: 33.33%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/*--------------overlay for links--------------------------*/
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.column:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
This is my HTML
<div class="row">
<div class="column">
<a id="one" href="#"><img id="chaos" src="cardchaos.jpg" alt=""></a>
</div>
<div class="column">
<a id="two" href="#"><img id="dragon" src="dragon card.gif" alt=""></a>
<img id="logo" src="logo.png" alt="">
<a id="three" href="#"><img id="dice" src="Img Try Again.jpg" alt=""></a>
</div>
<div class="column">
<a id="four" href="#"><img id="thunder" src="Thunder Bolt.jpg" alt=""></a>
</div>
</div>

You have a typo in your script. Also what you are trying to do is that you edit the element directly. If you try to remove the textcontent of the element on mouseleave you will lose the original element as well. I recommend doing this with css.
<div class="container">
<img src="https://images.unsplash.com/photo-1529981188441-8a2e6fe30103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.container {
position: relative;
width: 300px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
Have a look of my example and then underneath I fixed your version what is happening. https://codepen.io/shnigi/pen/pojQxNB

Text to be clipping mask of Div background

Bear with me on this... little hard to explain. So what I'm attempting to do is have a block of text remove the background of a div directly behind it. The image linked below was done is Illustrator and now I'm trying to find a solution within HTML & CSS.
Illustrator screenshot of what I'm trying to accomplish
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
The objective is to have the span text create a transparent mask of the grid-item-overlay background.
I'm open to any suggestions! :)

You could try working with mix-blend-mode,
mix-blend-mode : The mix-blend-mode CSS property describes how an
element's content should blend with the content of the element's
direct parent and the element's background.
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color:rgba(255,255,255,1);
mix-blend-mode: overlay;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>

<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span class="text">Text Here</span>
</div>
</div>
</div>
Add this css to your css File
.text{
color: rgba(255, 255, 255, 0.1);
}
.grid-item-overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color:rgba(255,0,0,0.5);
}

Jquery Draggable UI | Change image size when it is dragged into container

I am using the Jquery Draggable UI: http://jqueryui.com/draggable/
I'm working on a project where I can drag four images into 4 different containers. What I want to do is change the size of the image to the size of the container that it is dropped into. The image should revert back to its original size when it is taken outside of the container.
EXAMPLE: http://jsfiddle.net/W8yaz/546/
Here is my code as of right now:
HTML
<div class="bordered-boxes">
<ul>
<li class="squaredotted">
<div style="width:205px; height: 205px; border: 1px dotted #eee;" class='snappable'>
</div>
</li>
<li class="squaredotted">
<div class="" style="width:175px; height: 175px; border: 1px dotted #eee;">
</div>
</li>
<li class="squaredotted">
<div class="" style="width:145px; height: 145px; border: 1px dotted #eee;">
</div>
</li>
<li class="squaredotted">
<div class="" style="width:110px; height: 110px; border: 1px dotted #eee;">
</div>
</li>
</ul>
<div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: 760px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
<p>Least
<br />Important</p>
</div>
<div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: -95px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
<p>Most
<br />Important</p>
</div>
</div>
<div class="card-wrapper animation">
<ul>
<li class="square">
<div class="container">
<div class="card" id="incapacitation-icon">
<div class="front">
<img src="assets/icons/icon-incapacitation.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Incapacitation</h4>
<p>Confining Dangerous People</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li class="square">
<div class="container">
<div class="card" id="deterrence-icon">
<div class="front">
<img src="assets/icons/icon-deterrence.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Deterrence</h4>
<p>Setting an Example</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li class="square">
<div class="container">
<div class="card" id="rehabilitation-icon">
<div class="front">
<img src="assets/icons/icon-rehabilitation.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Rehabilitation</h4>
<p>Breaking the Cycle of Crime</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li style="margin-right:0;" class="square">
<div class="container">
<div class="card" id="retribution-icon">
<div class="front">
<img src="assets/icons/icon-retribution.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Retribution</h4>
<p>An Eye for An Eye</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
.card-wrapper li {
height: 203px;
position: relative;
list-style-type: none;
}
.card-wrapper .card {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
.card-wrapper .card div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
z-index:10;
}
.card-wrapper .card .front {
}
.card-wrapper .card .back {
background: #8d797a;
z-index:0;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
border: 3px solid white;
}
.card-wrapper .card .back h4{
font-size: 20px;
color:#4b3839;
margin-bottom:5px;
font-weight: bold;
}
.card-wrapper .card .back section {
padding: 20px;
text-align: center;
padding-top:30px;
}
.card-wrapper .card .back p {
font-size: 18px;
font-weight: 200;
color:white;
margin: 0px;
line-height: 30px;
}
.card-wrapper .card.flip .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index:0;
}
.card-wrapper .card.flip .back {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
z-index:10;
}
.card-wrapper .more-info {
font-size: 2em;
width: 1.5em !important;
text-align: center;
line-height: 1.5em;
background: #FFF;
color: #fff;
border-radius: 50px;
position: absolute !important;
top: -28px;
right: -18px;
height: 1.5em !important;
}
.card-wrapper .close-icon {
font-size: 2em;
width: 1.5em !important;
text-align: center;
line-height: 1.5em;
background: #FFF;
color: #fff;
border-radius: 50px;
position: absolute !important;
top: -28px;
right: -18px;
height: 1.5em !important;
}
.card-wrapper .card .close-icon {
display: none;
}
.card-wrapper .card.flip .more-info {
display: none;
}
.card-wrapper .card.flip .close-icon {
display: block;
}
.card-wrapper {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.bottom-row {
position: absolute;
width: 60%;
left: 0;
right: 0;
bottom: 70px;
margin: auto;
}
.bottom-row li {
list-style: none;
width: 20% !important;
display: inline-block;
margin-right: 3% !important;
height: 117px !important;
position: relative;
}
.bottom-row .back {
display: none;
}
.bottom-row .more-info {
display: none;
}
.bottom-row .more-info2 {
display: none;
}
.bordered-boxes {
position: absolute;
width: 75%;
left: 0;
right: 0;
margin: 0 auto;
display: none;
top: 50%;
transform: translateY(-50%);
}
.bordered-boxes ul {
display: table;
width: 100%;
margin: 0px;
padding: 0px;
}
.bordered-boxes ul li {
display: inline-block;
vertical-align: middle;
margin-right: 4%;
}
Javascript
$('.square').draggable({
snap: '.squaredotted',
snapMode: 'inner',
snapTolerance: 25,
});

The answer is here:
How to find out about the "snapped to" element for jQuery UI draggable elements on snap
$(".draggable").draggable({
snap: ".snap",
stop: function(event, ui) {
/* Get the possible snap targets: */
var snapped = $(this).data('draggable').snapElements;
/* Pull out only the snap targets that are "snapping": */
var snappedTo = $.map(snapped, function(element) {
return element.snapping ? element.item : null;
});
/* Process the results in the snappedTo array! */
}
});

Put <h1> below <img> in <div>

I have a loading div that I display, and I want to have the text in the <h1> below the <img> and I can get it aligned in the middle horizontally, but I cant get it aligned below the <img> here is my HTML
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
And my CSS
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-image {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
And I have included a fiddle here: http://jsfiddle.net/myh5f13q/
So how can I get the <h1> centered horizontally and below the <img>?
Thanks

Remove all the positioning and give this way:
#loading {
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loading-image {
width: 10%;
display: block;
margin: auto;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
<div id="loading">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
Preview
Full Screen

I would wrap the content in another <div> and use CSS transform and position absolute to centre both vertically and horizontally.
Source: https://css-tricks.com/centering-css-complete-guide/
#loading {
position: relative;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="loading">
<div id="loading-content">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>

Add another container, and vertically center it within the #loading element.
http://jsfiddle.net/mblase75/gfv08q4z/
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
z-index: 99;
background: rgba(255, 255, 255, 0.5);
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#loading-image {
display: block;
margin: auto;
width:10%
}
#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}
<div id="loading">
<div id="loading-container">
<img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
<h1 id="loading_text">Loading...</h1>
</div>
</div>