HTML/CSS/웹표준 카테고리의 질문인 듯합니다^^

CSS를 확인해야 하기 때문에 사이트를 보지 않고는 뭐라 답변을 드리는 게 불가능합니다.

확인 가능한 사이트 주소를 알려주시겠어요?

animaxx.net/foled-wear

입니다.

동그란 부분 안의 작은 네모칸이 링크 연결되는 부분인데 모바일 사이즈로 줄이면 이미지를 덮지 않아서 클릭이 안되네요.

http://animaxx.net/wp-content/plugins/kboard/skin/ocean-gallery/style.css

위 파일에서 보시면 아래 코드가 있습니다.

굵게 표시한 부분을 height: 100%; 으로 변경해서 테스트 해보시겠어요?

@media screen and (max-width: 768px) {
    #kboard-ocean-gallery-editor .kboard-attr-row input[type=text],
    #kboard-ocean-gallery-editor .kboard-attr-row input[type=file],
    #kboard-ocean-gallery-editor .kboard-attr-row input[type=password] { width: 50%; }
    #kboard-ocean-gallery-document .kboard-detail .detail-attr { clear: both; }
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li { display: none; }
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.first-page,
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.last-page { display: inline-block; *display: inline; zoom: 1; }
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.prev-page,
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.next-page { display: inline-block; *display: inline; zoom: 1; }
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.prev-page a,
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.next-page a { padding: 6px 18px; }
    #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.active { display: inline-block; *display: inline; zoom: 1; }
    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail .kboard-gallery-foreground { display:none; position: absolute; left: 0; right: 0 ;top: 0; bottom:0; line-height: 0;/*max-width:300px;padding-bottom:100%;*/}
    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail:hover .kboard-gallery-foreground {display:block;}
    #kboard-ocean-gallery-list .kboard-list img { display: block; margin: 0; width: 100%; height:auto ; vertical-align: middle; border-radius: 3px; box-shadow: 0 1px 2px RGBA(0, 0, 0, 0.2); }
    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-item { display: inline-block; *display: inline-block; zoom: 1; padding: 0; width: 47%; box-sizing: content-box; }
    #kboard-ocean-gallery-list .kboard-list .kboard-no-image { line-height: 300px; }
    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail { position: relative; float: left; width: 100%; text-align: center; }
    #kboard-ocean-gallery-list .kboard-list .kboard-gallery-title { float: left; padding: 16px 0 50px 0; width: 100%; }
}

참고로, 크롬등 최신 브라우저의 개발자도구(F12키)를 사용하시면 CSS 속성을 찾고 테스트 하기 편리합니다^^

해봤는데 안되길래 기존 over-foreground이미지 넣는 경로에 투명으로 png 파일 하나 넣어서 해결했습니다.

기존 호버 이미지를 뺐더니 그랬던것 같네요 ㅠㅋ 답변 감사드립니다.