Jquery 画廊网站内的重叠问题

我有一个问题，与图像重叠的页脚和导航栏时，检查网页的响应。我尝试使用jQuery，但未能使其正常工作，我觉得解决方案并不太复杂，我就是无法得到它

我不确定提供我正在使用的.png文件的有效方法，因此这里有一个imgur链接：

CSS、HTML和JS如下所示：

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

*{
保证金：0；
}
html{
位置：相对位置；
最小高度：100%；
}
身体{
背景:#232526；
背景：-webkit线性梯度（向右，#232526，#414345）；
背景：线性梯度（向右，#232526，#414345）；
边距：0em；
字体系列：“titilliumweb”，无衬线；
字体大小：12px；
}
img{
宽度：自动；
身高：100%；
}
页脚{
位置：固定；
保证金：0；
填充：0；
底部：0；
宽度：100%；
背景色：rgba（128128.3）；
文本对齐：居中；/*居中所有坐标*/
最大高度：155px；
边框顶部：1px实心#232526；
}
.左，.右{
显示：内联块；
列表样式类型：无；
宽度：自动；
字体大小：100%；
垂直对齐：顶部；
}
李先生{
文本对齐：右；/*在中心内右对齐*/
颜色：rgb（192192）；
文字装饰：无；
}
对，李{
文本对齐：左对齐；
}
页脚ul右李a{
文字装饰：无；
颜色：rgb（192192）；
}
.material-icons.md-14{
字体大小：1.167em；
}
.从中间滑出{
显示：内联块；
}
.从中间滑出：之后{
内容：''；
显示：块；
保证金：自动；
高度：0.167em；
宽度：0；
背景：透明；
过渡：宽度。5s缓和，背景色。5s缓和；
}
.中间滑出：悬停：之后{
宽度：100%；
}
ul.topnav{
保证金：0；
填充：0；
溢出：隐藏；
背景色：rgba（128128.3）；
显示：内联块；
文本对齐：居中；
宽度：100%；
位置：固定；
边框底部：1px实心#232526；
}
ul.topnav li{
显示：内联块；
文本对齐：居中；
}
ul.topnav li a{
颜色：rgb（192192）；
填充物：1.167em 1.333em；
文字装饰：无；
}
ul.topnav li a:hover{背景色：#232526；}
ul.topnav li a.active{背景色：rgba（228230229，.3）；}
ul.topnav li.icon{显示：无；}
a、 navbar品牌{
文字装饰：无；
颜色：#666666；
}
.imgcont{
高度：自动；
最大宽度：100%；
保证金：0；
填充：4.167em 0；
文本对齐：居中；
}
ul.imgcont li{
显示：内联块；
宽度：自动；
}
ul.imgcont li a：悬停{
背景色：rgba（200200.1）；
边框：0.083em实心rgba（0,0,0,5）；
边界半径：5px；
}
.文本框{
显示：内联块；
文本对齐：左对齐；
垂直对齐：顶部；
字号：28px；
颜色：rgb（192192）；
转化：translateY（150%）；
}
@媒体屏幕和屏幕（最大宽度：760像素）{
ul.topnav li:not（：first child）{display:none；}/*使导航栏不显示*/
ul.topnav li.icon{/*为切换创建块*/
浮动：对；
显示：内联块；
}
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
}
@媒体屏幕和（最大宽度：1216px）{/*这些用于解决重叠问题*/
ul.imgcont{
保证金：0；
填充：4.167em0 12.500em0；
}
}
@媒体屏幕和屏幕（最大宽度：1083px）{
ul.imgcont{
保证金：0；
填充物：8.333em0 12.500em0；
}
}
@媒体屏幕和屏幕（最大宽度：897px）{
.文本框{
转化：translateY（0%）；
}
}
@媒体屏幕和屏幕（最大宽度：760像素）{
ul.imgcont{
保证金：0；
填充：4.167em 0 170px 0；
}
}
@媒体屏幕和屏幕（最大宽度：755px）{
ul.imgcont{
保证金：0；
填充：4.167em0 12.500em0；
}
.隐藏的X{
显示：无！重要；
}
}
#主页。中间滑出：悬停：后{
背景颜色：灰色；
}
#荷马。中间滑出：悬停：之后{
背景色：黑色；
}
#战士。中间滑出：悬停：之后{
背景色：#C79C6E；
}
#德鲁伊。中间滑出：悬停：之后{
背景色：#FF7D0A；
}
#牧师。从中间滑出：悬停：之后{
背景色：#FFFFFF；
}
#圣骑士。从中间滑出：悬停：之后{
背景色：#F58CBA；
}
#猎人。中间滑出：悬停：之后{
背景色：暗绿色；
}
#法师。从中间滑出：悬停：之后{
背景色：#69CCF0；
}
#萨满。中间滑出：悬停：之后{
背景色：#0070DE；
}
#术士。从中间滑出：悬停：之后{
背景色：#9482C9；
}
#游荡者。从中间滑出：悬停：之后{
背景色：#FFF569；
}
#爪牙。中间滑出：悬停：后{
背景色：#C41F3B；
}
#拼写。中间滑出：悬停：之后{
背景色：#A330C9；
}
#主页。中间滑出：悬停：后{
背景色：黑色；
}
#战士。从中间滑出：悬停：afte