While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestions or guidance would be greatly appreciated.
To better illustrate the problem, here is a Codepen link: https://codepen.io/anon/pen/OmeNRa?editors=0110
var showImages = $("#showImages");
var hideImages = $("#hideImages");
var images = $("#images");
var overlay = $("#overlay");
var docHeight = $(document).height();
var writtenContent = $("#writtenContent");
var counter = 0;
var messageBox = $("#messageBox");
var sendMessage = $("#sendMessage");
showImages.click(function() {
counter++;
$(this).html("Show Images");
if (counter % 2 > 0) $(this).html("Hide Images");
$("body").toggleClass("blackout", 300);
images.slideToggle({
direction: "up"
}, 600);
writtenContent.slideToggle({
direction: "up"
}, 600);
});
sendMessage.click(function() {
messageBox.slideToggle({
direction: "up"
}, 500);
});
$(document).on("mouseenter", "span img", function() {
$(this).addClass("fade").siblings().show();
});
$(document).on("mouseleave", "span img", function() {
$(this).removeClass("fade").siblings().hide();
});.nav {
height: 8vh;
background: linear-gradient(-45deg, purple, purple, indigo);
color: white;
font-family: helvetica;
font-size: 20px;
position: fixed;
left: 0;
width: 100%;
z-index: 999;
}
#topNav {
top: 0vh;
}
#bottomNav {
bottom: -8.1vh;
transform: translateY(-100%);
}
#content {
padding-top: 8vh;
padding-bottom: 8vh;
margin: 0 auto;
}
#images {
display: none;
z-index: 100;
bottom: 0;
text-align: center;
}
#images span {
position: relative;
text-align: center;
}
#images span img {
height: 100px;
width: 100px;
}
.blackout {
background-color: black;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.name {
display: none;
color: white;
left: 0;
position: absolute;
bottom: 200%;
width: 100%;
font-weight: bold;
pointer-events: none;
}
.fade {
opacity: .2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="topNav">
</div>
<div id="content">
<div id="writtenContent">
<p>This page's written content starts here..</p>
<p>Page written content goes here.</p>
<p>Page written content goes here.</p>
<p>Page written content goes here.</p>
<p>Page written content goes here.</p>
<p>Page written content goes here.</p>
...
<p>END of page's written content.</p>
</div>;
<div id="images">
...
images and titles are listed here
...
</div>
</div>
<div class="nav" id="bottomNav">
<button id="showImages">Show Images</button>
</div>