Html 使悬停图像具有响应性

我已经做到了，一旦你将鼠标悬停在这个页面上的图片上，它们就会变成交互式的，并显示一个超链接。我已经尽了最大的努力使其具有响应性，但由于某些原因，左侧的图像突出，在白框和背景图像之间形成了一个间隙

如果有人能在这里努力帮助我，教育我一点，我将不胜感激：）谢谢

这是我的密码

/*超小型设备（手机，最高480px）*/
@媒体屏幕和屏幕（最大宽度：767px）{
}
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）和（最大宽度：991px）{
}
/*平板电脑/台式机及更高版本--------*/
@介质（最小宽度：992px）和（最大宽度：1199px）{
}
/*大型台式机及以上-----------*/
@媒体屏幕和屏幕（最小宽度：1200px）{
{
字号：2.350em；
}
}
身体{
宽度：100%；
保证金：0；
填充：0；
最大宽度：100%；
字号：2.175em；
字体系列：“氧气”，无衬线；
字体大小：300；
背景：url(http://eyeofthestormproductions.com/css/background.jpg)无重复中心固定；
背景尺寸：封面；
盒影：插入0.1000px rgba（0,0,0,3）；
}
安德烈{
垫面：1.750em；
左边距：1.25em；
最大宽度：100%；
}
.teamimg{
}
.团队{
文本对齐：居中；
垫面：5px；
边缘底部：25px；
字体系列：“氧气”，无衬线；
字体大小：300；
字体大小：50px；
保证金：自动；
}
.vspacer{
垫面：1.875em；
}
.视频容器{
位置：相对位置；
垫底：56.25%；
填充顶部：30px；
身高：0；
溢出：隐藏；
}
.video container iframe、.video container object、.video container embed{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.容器流体，.世界其他地区{
宽度：100%；
保证金：0；
填充：0；
最大宽度：100%；
}
.页脚文本{
字体系列：“氧气”，无衬线；
字号：100；
字体大小：15px；
颜色：白色；
左边距：30px；
不透明度：0.8；
文本对齐：右对齐；
}
.最后一箱{
字体系列：“氧气”，无衬线；
字号：100；
字号：19px；
文本对齐：居中；
}
.页脚{
背景尺寸：封面；
字体系列：“氧气”，无衬线；
保证金：0；
填充：0；
盒影：嵌入0.1000px rgba（0,0,0,2）；
填充：10px 0 10px 0；
}
boxmain先生{
背景色：白色；
宽度：100%；
最小高度：12.500em；
背景尺寸：封面；
最大宽度：100%；
边缘底部：100px；
垫底：15px；
}
.标志{
显示：块；
宽度：75%；
身高：96%；
保证金：自动；
最大宽度：100%；
边缘底部：-30px；
}
.navbar.nav>li>a{
颜色：#f2f4；
字体系列：“双体船”，无衬线；
字体大小：300；
字号：17px；
文本转换：大写；
左侧填充：35px；
文字装饰：无；
字母间距：1px；
}
.navbar默认值{
边际上限：0px；
背景：#000；
背景：rgba（0,0,0,0.1）；
边框颜色：透明；
}
@介质（最小宽度：768px）{
.导航栏导航{
浮动：无；
保证金：0自动；
显示：表格；
表布局：固定；
}
}
.他的年龄{
位置：相对位置；
宽度：300px；
边界半径：15px；
高度：434.5px；
利润率：10px；
浮动：左；
}
.htext{
显示：无；
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
高度：400px；
盒影：插入0.1000px rgba（0,0,0,5）；
文本对齐：居中；
字体系列：“氧气”，无衬线；
字体大小：300；
字号：17px；
左侧填充：5px；
右侧填充：5px；
}
霍华德先生{
字体系列：“氧气”，无衬线；
字体大小：400；
字体大小：50px；
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
高度：436px；
文本对齐：居中；
填充顶部：100px；
盒影：嵌入0.1000px rgba（0,0,0,2）；
}
.升级{
不透明度：0.7；
}
跨度{
颜色：白色；
}
.servicesimg{
垫面：1.250em；
垫底：2.188em；
边界半径：0.625em；
高度：自动；
最大宽度：100%；
左侧填充：1.25em；
右边距：1.25em；
}
.服务{
边缘顶部：0.325em；
字体系列：“氧气”，无衬线；
文本对齐：居中；
边缘底部：0.02933333em；
字体大小：300；
字体大小：35px；
}
.underhserv{
字体系列：“氧气”，无衬线；
字体大小：300；
字体大小：95%；
垫面：3件；
左边距：1.25em；
最大宽度：100%；
}
.teamimg{
垫面：0.450em；
垫底：1.188em；
边界半径：0.625em；
高度：自动；
最大宽度：100%；
左侧填充：1.25em；
右边距：1.25em；
}
.connectsc{
左边距：1.25em；
边缘底部：15px；
}
.followb{
左边距：1.25em；
边缘底部：-40px；
}
#likebox包装纸*{
宽度：100%！重要；
边缘底部：5px；
}
.在合同下{
垫面：1.750em；
左边距：1.25em；
最大宽度：100%；
字体大小：30px；
字体系列：“氧气”，无衬线；
字体大小：400；
}
.PG垫片{
边缘底部：60px；
}
.事件填充{
边缘顶部：1.250em；
边缘底部：2.188em；
}
玛金先生{
边缘顶端：13px；
边缘底部：7px；
}
.面包屑{
边框：0px实心rgba（2452452451）；
背景色：白色；
左边距：1.25em；
字体系列：“双体船”，无衬线；
字体大小：300；
}
李面包屑{
字体大小：14px；
}
.面包屑a{
颜色：rgba（66、139、202、1）；
}
.面包屑a:悬停{
颜色：rgba（421001501）；
}
.breadcrumb>.active{
颜色：rgba（153、153、153、1）；
}
.breadcrumb>li+li:之前{
颜色：rgba（204、204、204、1）；内容：“\002F\00a0”；
}
.mediaheading{
边缘顶部：0.325em；
字体系列：“氧气”，无衬线；
文本对齐：居中；
边缘底部：0.79333em；
字体大小：300；
字体大小：35px；
}
.底盒{
边缘顶部：30px；
}
.标题{
显示：内联块；
位置：相对位置；
溢出：隐藏；
-webkit转换：translateZ（0）；
右边距：1.25em；
边缘顶部：1.250em；
边缘底部：2.188em；
左边距：1.25em；
}
船长