If the image you want to emphasize is a sibling or offspring of the element you are hovering over, it can be achieved quite easily.
Siblings
<div>
<img class="thumbnail" src="path/to/thumb.png" />
<img class="fullSize" src="path/to/Full.png" />
</div>
.thumbnail:hover + .fullsize {
display: block;
}
Descendants
<ul>
<li><img class="thumbnail" src="path/to/thumb.png" />
<ul>
<li class="fullsize"><img src="path/to/full.png" /></li>
<li class="desc">Description text for above image</li>
</ul>
</li>
</ul>
.thumbnail .fullsize,
.thumbnail .desc {
display: block;
}
Unfortunately, the reverse (hovering over the image to show the menu) cannot be accomplished with CSS due to the one-way cascade nature. However, it can be implemented easily using JavaScript, particularly jQuery:
$(document).ready(
function(){
$('.fullsize.').hover(
function() {
$(this).closest('.thumbnail').show();
}
);
}
);
I am intrigued as to the reason behind wanting this feature. It appears that you wish to hover over either 'thumbnail' or 'fullsize' to reveal the other. This suggests that one or both of these elements will be hidden at any given time. In such cases, how does the user know they exist for interaction?
See Demo at JS Bin (based on siblings).
Here's an alternate method for creating a relationship between the two anywhere on the page:
HTML:
$(document).ready(
function(){
$('.fullsize, .thumbnail').mouseover(
function() {
var currId = $('.fullsize').index();
if ($(this).hasClass('thumbnail')) {
var toShow = '.fullsize';
}
else {
var toShow = '.thumbnail';
}
$(toShow).eq(currId).addClass('show');
}
);
$('.fullsize, .thumbnail').mouseout(
function() {
var currId = $('.fullsize').index();
if ($(this).hasClass('thumbnail')) {
var toShow = '.fullsize';
}
else {
var toShow = '.thumbnail';
}
$(toShow).eq(currId).removeClass('show');
}
);
}
);
This method differs slightly from @BenWells' suggestion in that it does not require an explicit relationship, but it does rely on the thumbnails being in the same order as their corresponding fullsize elements (or vice versa) since it is based on their index positions.