image link to another image(image gallery)

Question 1

Yes, you can do it. But, you need a little bit of JavaScript here.

Here I am giving you a similar code which you have written above.

<html>
 <head>
 <script>
function display(imgElement){
    document.getElementById('displayimg').setAttribute('src',imgElement.getAttribute('src'));
    }

</script>
<style>
#display{
border:solid 1px blue;
width:90%;
height:60%;
margin:auto;
}
#select{
padding:10% 1% 1% 1%;
width:95%;
height:25%;
mrgin:auto;
}
#display img{
border:solid 1px red;
width:100%;
height:100%;
}
#select img{
border:solid cyan 1px;
floatLleft;
width:50px;
height:25px;
}
#select a{
border:solid green 1px;
}
#select a:hover,a:active{
border:solid yellow 1px;
}
</style>
</head>
<body>
<div id="display">
    <img id="displayimg">
</div>
<div id="select">
<img id="selectimg" src="D:\D drive\147266.png" onclick='javascript:display(this)'>
<img id="selectimg" src="D:\D drive\d1x5u3.png" onclick='javascript:display(this)'>
<img id="selectimg" src="D:\D drive\ct0.jpg" onclick='javascript:display(this)'>
    <img id="selectimg" src="D:\D drive\aftn.jpg" onclick='javascript:display(this)'>
</div>
 </body>

and the output will be like this

enter image description here

This is just as simple as your requirement. but you need to do a lot more to design Image Gallery.

If you wanted to display the image when you place your mouse on the image, just replace onclick with onmouseover.

Question 2

No, when ever you want something triggered by a click, then you have to use javascript. The closest you could get is by using a mouse hover.

Question 3

You can't do that using CSS only.

Take a look at these websites http://lokeshdhakar.com/projects/lightbox2/ and http://fancybox.net/

You can download and use those plugins according to your needs or write your own plugin if you have enough skills in Javascript or use any other library (such as jQuery - http://jquery.com/) written on Javascript.

Question 4

No, you can't do that with your current HTML and CSS alone. What you can do with that code is add a little javascript to achieve what you want.

So, since you didn't mention javascript as an option, I've assumed that you don't know how to do it using javascript and I took the liberty to write you an fiddle so you can figure out what's your next step if you want to do this with javascript.

It might seem hard to understand now, but as soon as you start learn actual javascript, you won't feel the need to search for plugins, widgets or even help to do anything you want on your webpage, apps, etc.

Feel free to ask for explanation on any part of the code.

Fiddle

(i didn't change the images, so they don't appear. If you want to see some image, just change their src)

Javascript:

var thumbImages = document.getElementsByClassName('thumbImage')[0].children;

[].forEach.call(thumbImages, function (item) {
    item.addEventListener('click', function (e) {
        var gallery = document.getElementsByClassName('displayImage')[0];
        gallery.innerHTML = '';
        gallery.appendChild(e.currentTarget.cloneNode(true));
    }, false);
});