Develop Reference

Why does my overlay not work on img hover?

I've been trying to get my Img's to zoom and produce an overlay with text on my img hover. The text and zoom is currently working but the overlay doesn't. What am I missing in my code?
My first thought was maybe the overlay was hidden behind a value in z-index. When the value was changed the results did not change.
I've tried moving HTML and CSS around to see if this would help. No change in results.
Keep in mind that frame 1 and frame 2 are the ones I'm currently trying to focus on.
Thanks!
.box-wrap {
display: table;
margin: 60px;
}
.zoom {
position: relative;
}
.box-content h1{
height: 100%;
width: 100%;
margin-top: 27%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* OVERLAY */
.zoom .overlay {
background-color: black;
position: absolute;
z-index: 4;
opacity: 0;
}
.zoom:hover .overlay {
z-index: 4;
opacity: 0.7;
}
/* END OVERLAY */
/* TEXT */
.zoom h1{
color: white;
position: absolute;
visibility: hidden;
}
.zoom:hover h1 {
pointer-events: none;
visibility: visible;
text-align: center;
vertical-align: middle;
z-index: 3;
}
/* END TEXT */
/* ZOOM EFFECT */
.zoom img {
max-height: 100%;
max-width: 100%;
transition: 6s;
transform: scale(1.0);
}
.zoom img:hover {
transition: 6s;
transform: scale(2.0);
}
.frame {
float: left;
height: 500px;
width: 50%;
overflow: hidden;
}
.frame img {
height: 500px;
width: 100%;
}
/* START BOX 2 */
.frame2 {
float: right;
height: 500px;
width: 50%;
overflow: hidden;
}
.frame2 img {
height: 500px;
width: 100%;
}
/* END BOX 2 */
/* START BOX 3*/
.frame3 {
float: left;
height:300px;
width: 25%;
overflow: hidden;
}
.frame3 img {
height: 300px;
width: 100%;
}
/* END BOX 3 */
/* START BOX 4 */
.frame4 {
object-fit: cover;
float: right;
height:300px;
width: 25%;
overflow: hidden;
object-fit: cover;
}
.frame4 img {
height: 300px;
width: 100%;
}
/* END OF BOX4 */
/* START BOX 5 */
.frame5 {
float: left;
height:300px;
width: 25%;
overflow: hidden;
object-fit: cover;
}
.frame5 img {
height: 300px;
width: 100%;
}
/* END OF BOX5 */
/* START BOX 6 */
.frame6 {
float: right;
height:300px;
width: 25%;
overflow: hidden;
}
.frame6 img {
height: 300px;
width: 100%;
}
<div class="box-wrap">
<div class="frame zoom">
<div class="box-content">
<h1>SKULL</h1>
<img src="img/skull.jpg" alt="#">
<span class="overlay"></span>
</div>
</div>
<div class="frame2 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/liquify.jpg" alt="#">
<div class="overlay"></div>
</div>
</div>
<div class="frame3 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/chief.jpg" alt="#">
</div>
</div>
<div class="frame4 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/vect.png" alt="#">
</div>
</div>
<div class="frame5 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/sun.jpg" alt="#">
</div>
</div>
<div class="frame6 zoom">
<div class="box-content">
<h1>SWIRL</h1>
<img src="img/card.jpg" alt="#">
</div>
</div>

Try to set the overlay width and height.
.zoom .overlay {
background-color: black;
position: absolute;
z-index: 4;
opacity: 0;
width: 100%; //define here
height: 100% //define here
}
Other usual way to do that is using the :after pseudo element like:
.zoom:after {
background-color: black;
position: absolute;
z-index: 4;
opacity: 0;
width: 100%; //define here
height: 100% //define here
}
This way you don't need to create a .overlay div

Transition not working for height

Tried writing "transition: height 1s ease-out;" in Internal CSS, inline CSS, javascript but nothing works.
I am using Chrome(latest as of now).
It works when I had different funtions like onmouseover to open the shutter and onmouseclick to close it.
<script>
function departmentShutter(){
if(document.getElementById("departmentShutter").clientHeight === 100 ){
document.getElementById("departmentShutter").style.height = "inherit";
}
else{
document.getElementById("departmentShutter").style.height = "100px";
}
}
function studentShutter(){
if(document.getElementById("studentShutter").clientHeight === 100 ){
document.getElementById("studentShutter").style.height = "inherit";
}
else{
document.getElementById("studentShutter").style.height = "100px";
}
}
</script>
The CSS is as follows: Just focus on transition to work.
.dashboard{
width: 100%;
height: fit-content;
position: fixed;
}
.dashboardContent{
height: -webkit-fill-available;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow-x: auto;
}
.department{
height: 100%;
width: 50%;
left: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.student{
height: 100%;
width: 50%;
right: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.departmentShutter{
height: inherit;
transition: height 1s ease-out;
width: 50%;
left: 0px;
display: inline-block;
background-color: #09d;
float: left;
z-index: 99;
position: fixed;
}
.studentShutter{
height: inherit;
transition: height 1s ease-out;
width: 50%;
right: 0px;
display: inline-block;
background-color: #2d0;
float: left;
z-index: 99;
position: fixed;
}
.departmentShutter span,.studentShutter span{
font-size: 5em;
}
.rectangle{
height: 200px;
width: 200px;
background-color: #78015d;
}
HTML:
<div class="dashboard">
<div class="dashboardContent">
<div id="departmentShutter" class="departmentShutter cursorPointer disable-selection" onclick="departmentShutter()">
<span class="center">Department</span>
</div>
<div class="department">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
<div id="studentShutter" class="studentShutter cursorPointer disable-selection" onclick="studentShutter()">
<span class="center">Student</span>
</div>
<div class="student">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
</div>
</div>

Transitions only work on values that can be converted to numbers and values that have been explicitly set on an element up front, so that the CSS rendering engine can determine the progression from the start value to the end value. inherit is not a value that is numeric, so the transition doesn't work.
Change height:inherit to height:100% in the .departmentShutter and .studentShutter classes as well as in the JavaScript.
Also, there is no need for two separate functions for the sizing of the two separate div elements since the two functions do exactly the same thing, just on different elements. The two functions can be combined into one and to determine which element needs to be sized, you need only use the this keyword, which will be bound to whichever div initiated the event in the first place.
Lastly, don't use inline HTML event attributes (onclick, etc.) to bind your event handlers. That is how it was done 20 years ago, but unfortunately it just keeps getting copied and pasted today, so new users don't know any better. There are many reasons not to use this technique anymore. Instead, separate your JavaScript completely from your HTML and follow modern standards for event binding.
// Get your DOM refernces just once to avoid excessive DOM scans
// Find both div elements that should be clickable and place them both in an array
var shutters = Array.from(document.querySelectorAll(".departmentShutter, .studentShutter"));
// Loop through the array...
shutters.forEach(function(shutter){
// Assign a click event handler to each
shutter.addEventListener("click", function(evt){
// Loop through array and reset heights of both shutters
shutters.forEach(function(shutter){
shutter.style.height= "100%";
});
if (this.clientHeight === 100) {
this.style.height = "100%";
}
else {
this.style.height = "100px";
}
});
});
.dashboard {
width: 100%;
height: fit-content;
position: fixed;
}
.dashboardContent {
height: -webkit-fill-available;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow-x: auto;
}
.department {
height: 100%;
width: 50%;
left: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.student {
height: 100%;
width: 50%;
right: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.departmentShutter {
height: 100%;
transition: height 1s ease-out;
width: 50%;
left: 0px;
display: inline-block;
background-color: #09d;
float: left;
z-index: 99;
position: fixed;
}
.studentShutter {
height: 100%;
transition: height 1s ease-out;
width: 50%;
right: 0px;
display: inline-block;
background-color: #2d0;
float: left;
z-index: 99;
position: fixed;
}
.departmentShutter span, .studentShutter span {
font-size: 5em;
}
.rectangle {
height: 200px;
width: 200px;
background-color: #78015d;
}
<div class="dashboard">
<div class="dashboardContent">
<div id="departmentShutter" class="departmentShutter cursorPointer disable-selection percentHeight">
<span class="center">Department</span>
</div>
<div class="department">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
<div id="studentShutter" class="studentShutter cursorPointer disable-selection percentHeight">
<span class="center">Student</span>
</div>
<div class="student">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
</div>
</div>

Show / hide element inside parent div in jQuery

I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The a tag has styling on it so it extends to 100% of the width and height of the div.
It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.
I have this HTML structure
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
and this CSS
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
and the jQuery
$(document).ready(function(){
$('.player').hover(
function () {
$(this).closest('a').show();
},
function () {
$(this).closest('a').hide();
}
);
});

You don't need javascript to do that...just adjust the positioning.
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
}
.player:hover a {
display: block;
}
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="http://www.fillmurray.com/250/250" alt="player desc" />
</div>
</div>

$.closest() searches through an element's parents, not its children. You should probably use $('a', this) to select the child <a> element.

Change html to
<div class="player">
<a id="name" href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
And Javascript to
$(document).ready(function() {
$('.player').hover(function() {
$('#name').toggle('display');
});
});

See if this helps you have tried to use your code to make it work.(For some reason this works for the first time. U got to re run this)
$(document).ready(function(){
$('.player').hover(
function () {
$(this).append($("a").html());
},
function () {
var ss = $(".player__name");
ss.remove();
}
);
});
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="player">
<a href="/player?PlayGuid=123" id="play1">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>

Scrolling bug in Firefox

I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks

Maybe you should give position: absolute; to .full-menu, instead of fixed.

Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.

How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

Div box expand and re-position other div boxes

so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome

add this CSS rule to your Div tags:
display:inline-block;

Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}