Html onhover向下更改图像和文本位置，onmouseout转到初始位置？

我可以知道如何改变图像以及图像中的文本改变其位置吗？当我将鼠标悬停在图像上时，它会向下移动，但不会移动文本。图像工作正常，但文本工作不正常

小提琴：

h2 { 
   position:fixed; 
  margin-top:40px;
   left: 50; 

   z-index:100;
 height:100%;
}
h2:hover{
  position: relative; 
  margin-top:-50px;
   left: 50; 
}

---

请帮帮我。非常感谢非常有缺陷的代码，如果没有css样式的一些重大更改，这是不可能的

（我尽量不碰你的脚本！）

h2{
边际：0px；
线高：无；
}
a{
垂直对齐：顶部；
显示：内联块；
位置：相对位置；
}
a:悬停{
顶部：50px；
}

功能b1（x1）{
x1.style.height=“140px”；
x1.style.width=“120px”；
}
函数s1（x2）{
x2.style.height=“100px”；
x2.style.width=“120px”；
}
功能b2（x3）{
x3.style.height=“140px”；
x3.style.width=“120px”；
}
功能s2（x4）{
x4.style.height=“100px”；
x4.style.width=“120px”；
}
功能b3（x5）{
x5.style.height=“140px”；
x5.style.width=“120px”；
}
功能s3（x6）{
x6.style.height=“100px”；
x6.style.width=“120px”；
}
功能b4（x7）{
x7.style.height=“140px”；
x7.style.width=“120px”；
}
函数s4（x8）{
x8.style.height=“100px”；
x8.style.width=“120px”；
}
功能b5（x9）{
x9.style.height=“140px”；
x9.style.width=“120px”；
}
功能s5（x）{
x、 style.height=“100px”；
x、 style.width=“120px”；
}
功能b6（x12）{
x12.style.height=“140px”；
x12.style.width=“120px”；
}
功能s6（x12）{
x12.style.height=“100px”；
x12.style.width=“120px”；
}

在这里检查jsfidle如果我理解正确，请尝试以下方法：a:hover h2{margin top:50px}您的脚本有很多地方出错。在某些鼠标位置上，图像会自动上下移动。检查这侧右上角菜单我想要类似类型的悬停动作，这是我的JSFIDLE