Jquery Image SlideShow + Hover Zoom on Slideshow

Ok, so I want to create a full-width image slideshow using CSS + jquery without the use of a plugin. A slideshow similar to SquareSpace landing page (www.distinct-mind.com). I have a div with class "hoverDiv", this div is there for when a user hover's on the image during slideshow, it zooms in the image and shows some text and pause's the slideshow. But my attempt at this doesn't work 100%. See jsfiddle code here: Jsfiddle Code. What can I do to make my Jquery code better, more fluent slideshow and so that when I hover it works?

Javascript, CSS & HTML

var imgArray = [

	"images/Secure Line.jpg", 
	"images/White Out.jpg", 
	"images/Angels over The City.jpg",
	"images/Edit and Chill.jpg",
	"images/The Grind.jpg"

]

var counter = 0;
var interval;


$(document).ready(function(){


	
	$("#slideshow > div:gt(0)").hide();
	var intervalz = setInterval("animateSlides()", 3000);
	$(".hoverDiv").hover(zoomIn, zoomOut);

	var pause = false;

	function animateSlides() {

		
			if (!$("#slideshow > div:first").next()) {
				counter = 0
			} else {

				$("#slideshow > div:first")
					.fadeOut(1000)
					.next()
					.show()
					.addClass("rightNow")
					// .fadeIn(1600)
					.end()
					.removeClass("rightNow")
					.appendTo("#slideshow");
					counter++;
				}

			
		}

	
			
	


	var details = [

		{img: "images/Secure Line.jpg", caption: "Secure Line", text: "Beneath all the sounds and chaos"},
		{img: "images/Angels over The City.jpg", caption: "Angels Over The City", text: "Angels watching your every step"},
		{img: "images/White Out.jpg", caption: "White Out", text: "Too bright out to think"},
		{img: "images/Edit And Chill.jpg", caption: "Edit And Chill", text: "No matter the place, editing takes place"},
		{img: "images/The Grind.jpg", caption: "The Grind", text: "Grinding and finding your way up to just fall back down again"}

	];



	// Scale Current Image in SlideShow and Show Text
	function zoomIn() {
		pause = true;
		clearInterval(intervalz);
		$("#slideshow .rightNow").addClass("hoverImage");
	
		$("#details").removeClass("hide");
		$("#details").addClass("appear");
		$("#details").html('<h4>' + details[counter].caption + '</h4> <p>' + details[counter].text + '</p>')
	}

	// Zoom Out Current Image in SlideShow and Hide Text
	function zoomOut() {	
		$("#slideshow .rightNow").removeClass("hoverImage");
	
		$("#details").addClass("hide");
		$("#details").removeClass("appear");

		setTimeout(function(){
			pause = false;
			intervalz = setInterval(animateSlides, 3000)
		}, 3000);
		
}

});




  
 
            
/*Reset Css*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*End of reset*/

html {
	overflow-y: hidden;
	overflow-x: hidden;
}

body {
	background-color: #d7d7e0;
	font-family: Nunito;
	font-size: 30px;
}

body, .slideshow, .image, .vertical-align-wrapper {
	width: 100%;
	height: 100vh;
}

.slideshow {
	position: relative;
}

.image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

}

.is-hidden {
	display: none;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}


.vertical-align-wrapper {
	display: table-cell;
	vertical-align: middle;
	font-size: 5em;
	color: #ffffff;
}

@media only screen and (max-width : 992px) {

.vertical-align-wrapper span { 
	font-size: 2.5rem; 
}

}

.image-one { 
	background-image: url("images/Secure Line.jpg"); 
}

.image-two { 
	background-image: url("images/White Out.jpg"); 
}

.image-three { 
	background-image: url("images/Angels over The City.jpg"); 
}

.image-four { 
	background-image: url("images/Edit and Chill.jpg"); 
}

.image-five { 
	background-image: url("images/The Grind.jpg"); 
}



.hoverDiv {
	
	width: 80%;
	height: 700px;
	left: 50%;
	margin-left: -40%;
	position: fixed;

	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease;

}


#details {
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	background-color: transparent;
	width: 25%;
	position: relative;
}

#details p {
	/*margin-top: -30px;*/
}

.hoverImage {
	filter: grayscale(50%);
	-webkit-filter: grayscale(50%);
	opacity: 0.6;
	transform: scale(1.3);
	-webkit-transform:scale(1.3);
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease;
}


.appear {
	opacity: 1
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease;
}

.hide {
	opacity: 0;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	transition: all 2s ease;
}
<!DOCTYPE html>
<html>

<head>
	<title>Distinct Mind</title>
	<link rel="stylesheet" type="text/css" href="landing.css">
	<link href='https://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>

</head>

<body>

	<div id="details" class="hide">	
	</div>
	
	<div class="hoverDiv">
	</div>


	<div id="slideshow">
		
		<div class="image image-one rightNow">
			<div class="vertical-align-wrapper">
				<span></span>				
			</div>
		</div>
		
		<div class="image image-two">
			<div class="vertical-align-wrapper">
				<span></span>				
			</div>
		</div>

		<div class="image image-three">
			<div class="vertical-align-wrapper">
				<span></span>				
			</div>
		</div>

		<div class="image image-four">
			<div class="vertical-align-wrapper">
				<span></span>				
			</div>
		</div>

		<div class="image image-five">
			<div class="vertical-align-wrapper">
				<span></span>				
			</div>
		</div>

	</div>

<script type="text/javascript" src="bs/backstretch.js"></script>
<script type="text/javascript" src="landing.js"></script>
</body>
</html>




<body>

<div id="details" class="hide"> 
</div>

<div class="hoverDiv">
</div>


<div id="slideshow">

    <div class="image image-one rightNow">
        <div class="vertical-align-wrapper">
            <span></span>               
        </div>
    </div>

    <div class="image image-two">
        <div class="vertical-align-wrapper">
            <span></span>               
        </div>
    </div>

    <div class="image image-three">
        <div class="vertical-align-wrapper">
            <span></span>               
        </div>
    </div>

    <div class="image image-four">
        <div class="vertical-align-wrapper">
            <span></span>               
        </div>
    </div>

    <div class="image image-five">
        <div class="vertical-align-wrapper">
            <span></span>               
        </div>
    </div>

</div>

<script type="text/javascript" src="bs/backstretch.js"></script>
<script type="text/javascript" src="landing.js"></script>
</body>
</html>