각각 링크를 걸고 싶으시면 html 태그 <a>태그를 사용하시는게 좋을것 같습니다

아래 참고 할만한 링크를 남겨드릴테니 참고해보시겠어요?

http://tcpschool.com/html-tags/intro

마우스를 특정 영역에 올렸을 때 어떠한 처리를 하시려면

jQuery의 hover() 또는 mouseover() 함수를 이용해보시겠어요?

이미지나 텍스트를 겹치게 표현하시려면

CSS 속성 중 하나인 position: absolute; 코드와 z-index를 적용해주시면 됩니다.

아래의 링크에 예제들도 있으니 참고해보시겠어요?

https://api.jquery.com/hover/
https://api.jquery.com/mouseover/
https://www.w3schools.com/cssref/pr_class_position.asp
https://www.w3schools.com/cssref/pr_pos_z-index.asp

고맙습니다.