<div class="header-maine">
<span class="nav-link float-left m-3">DIRECTORS</span>
<span class="nav-link float-right m-3">contact</span>
</div>
<div class="full-width-module">
<div class="row">
<div class="col-md-6 col-lg-3 text-white photo-container">
<div class="sub-photo-container up left" data-index="0">
<img class="avatar-module" src="https://i.ibb.co/yFvxt8Z/avatar1edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Julliete Ratel</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 text-white photo-container">
<div class="sub-photo-container down left" data-index="1">
<img class="avatar-module " src="https://i.ibb.co/SwnqqYY/avatar2edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Bill Thomanson</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 text-white photo-container">
<div class="sub-photo-container up left" data-index="2">
<img class="avatar-module " src="https://i.ibb.co/XLzh8zH/avatar3edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Anna Winston</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 text-white photo-container">
<div class="sub-photo-container down left" data-index="3">
<img class="avatar-module " src="https://i.ibb.co/GdFxwFK/avatar4edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Emma Adams</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-white photo-container">
<div class="sub-photo-container down right" data-index="4">
<img class="avatar-module " src="https://i.ibb.co/2SsPGmX/avatar5edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Michael Rock</span>
</div>
</div>
</div>
<div class="col-lg-3 text-white photo-container">
<div class="sub-photo-container up left" data-index="5">
<img class="avatar-module " src="https://i.ibb.co/8NfM2XP/avatar6edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Tom Howrang</span>
</div>
</div>
</div>
<div class="col-lg-3 text-white photo-container">
<div class="sub-photo-container up right" data-index="6">
<img class="avatar-module " src="https://i.ibb.co/Fw47JQb/avatar7edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Alice Parker</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 text-white photo-container">
<div class="sub-photo-container down right" data-index="7">
<img class="avatar-module " src="https://i.ibb.co/myVMv28/avatar8edit.jpg">
<div class="dark-mask">
<span class="avatar-name">Adam Kane</span>
</div>
</div>
</div>
</div>
</div>
body{
background-color: #08202B;
overflow-x: hidden;
}
.header-maine{
position: absolute;
overflow: hidden;
width: 100%;
top: 0;
}
.nav-link{
font-family: 'GTAmericaExpanded',sans-serif;
font-size: 2.4rem;
color: #fff;
font-weight: 900;
text-transform: uppercase;
cursor: pointer;
line-height: 1.2em;
}
.full-width-module{
position: relative;
top: 0;
margin-top: 200px;
}
.photo-container{
height: 400px;
}
.avatar-module{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sub-photo-container{
cursor: pointer;
overflow: hidden;
width: 50%;
height: 60%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all 0.2s;
z-index: 1;
}
.avatar-name{
width: 100%;
position: absolute;
font-family: 'GTAmericaExpanded',sans-serif;
font-size: 1.2rem;
color: #fff;
font-weight: 800;
top: 50%;
text-align: center;
transform: translateY(-50%);
transition: all 0.2s;
}
.sub-photo-container:hover{
width: 65%;
height: 75%;
z-index: 2;
}
.sub-photo-container:hover .avatar-name{
font-size: 1.7rem;
}
.dark-mask:before{
position: absolute;
top: 0;
content: "";
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.2);
}
.up{
top:40%;
}
.down{
top: 60%;
}
.left{
left: 40%;
}
.right{
left: 60%;
}
$(function () {
const $avatarModule = $(".avatar-module");
const $subPhotoContainer = $(".sub-photo-container");
const $photoContainer = $(".photo-container");
const $fullWidthModule = $(".full-width-module");
const inRow = 4;
$(window).on("resize", function(){
$avatarModule.css("width", "100%");
$avatarModule.css("width", (parseFloat($avatarModule.css("width")) * 1.3).toString());
});
$avatarModule.css("width", (parseFloat($avatarModule.css("width")) * 1.3).toString());
var i = 0;
var primaryXTab = [];
var primaryYTab = [];
$subPhotoContainer.each(function () {
primaryXTab[i] = $(this).css("left");
primaryYTab[i] = $(this).css("top");
i++;
});
$photoContainer.hover(function () {
$(this).on("mousemove", function (e) {
let dataIndex = parseInt($(this).find(".sub-photo-container").attr("data-index"));
let boxX = $(this).innerWidth();
let boxY = $(this).innerHeight();
let pageX = parseFloat(e.pageX);
let pageY = parseFloat(e.pageY);
let positionX = pageX % boxX;
if (dataIndex < inRow) {
var positionY = pageY - ($fullWidthModule.outerHeight(true) - $fullWidthModule.innerHeight());
}
else {
var positionY = pageY - ($fullWidthModule.outerHeight(true) - $fullWidthModule.innerHeight()) - boxY;
}
if (positionY > 0 && positionY < boxY) {
$(this).find(".sub-photo-container").css({
"top": positionY + "px",
"left": positionX + "px"
});
}
});
}, function () {
$photoContainer.off("mousemove");
$(this).find(".sub-photo-container").css({
"top": primaryYTab[$(this).find(".sub-photo-container").attr("data-index")],
"left": primaryXTab[$(this).find(".sub-photo-container").attr("data-index")]
});
});
});