순수 CSS만으로도 코딩이 가능하겠네요...

일단 반복문(?)으로 문서를 불러올때 div하나 만들어서 이미지와 제목을 한번 더 쓴 후

CSS로 위치를 지정합니다.

그다음 선택자를 이용하여 저 이지맴버에 hover되면 그 하위 div 가 display 되고 나머지는 none로 바꾸는...

이런식으로 하면 될것같네요~

자바스크립트로 해도 되고요.

xe에 있는 기본 content 위젯을 사용해서 설명합니다......

위젯 설정은 내용형태를 이미지+제목으로 하고

html 출력형태를 table 이것으로 설정합니다.....

xe - widgets - content - skins - default - image_title.html 열고
line 66 쯤에
<a href="{$widget_info->content_items[$thumbnail_idx]->getLink()}" class="thumb" target="_blank"|cond="$widget_info->new_window"><img src="{$widget_info->content_items[$thumbnail_idx]->getThumbnail()}" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px" id="pic"></a>
여기서 붉은 색 부분을 추가

그리고
line 88 쯤에
<a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window" onMouseOver="document.getElementById('pic').src='{$item->get('thumbnail')}'">{$item->getTitle($widget_info->subject_cut_size)}</a>
여기서 붉은 색 부분을 추가........

결과를 눈으로 보기.......