Changing images on hover with css/html - html

Question

I have a problem with changing images by hover effect. Actually I can change image if the images are one on the top of the other but I need something different.
I need to change the images when I mouse over another image. Like;
<div id="gallery">
<div>
<img src="images/team-large.jpg" alt="Img">
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon">
</li>
</ul>
</div>
This is my HTML Code and I need to change
<img src="images/team-large.jpg" alt="Img">
this image when I mouse over the other sub images but I'm stuck.
Addition;
How can I change other images by onmouseover and onmouseout commands??
<div id="gallery">
<div>
<img src="images/team-large.jpg" id="Img1" name="Img1" class="Img1" alt="Img1" />
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler"
onmouseover="'#Img1'.src='images/elek3.jpg'" onmouseout="'#Img1'.src='images/team-large.jpg'">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler" class="thumbnail">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon" class="thumbnail">
</li>
</ul>
</div>
I added the ID name to Img1 and tried to change the image when I mouse over 'images/elek2.jpg' but it doesn't work.
Thanks for help.

Answer 1

You could alter the background image using css's :hover instead. Something like:
div{
height:200px;
width:200px;
background:url("http://placekitten.com/g/200/200");
}
div:hover{
background:url("http://placekitten.com/g/200/400");
}
<div></div>
For what you're looking for, you might need the child or sibling selector:
.parent{
height:300px;
width:300px;
background: url("http://placekitten.com/g/300/300");
}
.child{
height:200px;
width:200px;
background: url("http://placekitten.com/g/200/200");
}
.parent:hover .child{
background: url("http://placekitten.com/g/200/300");
}
<div class="parent">
<div class="child"></div>

Answer 2

You may try this jQuery code to change source of main image
var original = $('#main').attr('src');
$('.thumbnail').mouseover(function()
{
var source = $(this).attr('src'); // retrieve image source of hovered image
$('#main').attr('src', source); // update main image source
})
.mouseout(function() {
$('#main').attr('src', original); // restore original image source
});
jsFiddle code (UPDATED)
In the linked snippet, I've assigned a main id to main image and a thumbnail class to other images. This allows to access them runtime via jQuery.