CSS How can I make button show image - css

Question

I have a question about making a button show image
For example, I have four buttons
I want Each button showing image in the same content for images
In other words:
When you press one of the buttons show you image
here is an example: https://jsfiddle.net/i5yal/yvCtQ/1/
<div id="section-container">
<div class="section-img-container"><a>images will appear here</a>
</div>
</div>
<div id="section-button-container"><div>
<div class="section-button1"><a>1</a>
</div>
<div class="section-button2"><a>2</a>
</div>
<div class="section-button3"><a>3</a>
</div>
<div class="section-button4"><a>4</a>
</div>
</div>
</div>
CSS code:
#section-container {
background-color: #C0C0C0;
width: 300px;
height: 300px;
margin:0 auto;
}
#section-button-container {
width: 300px;
height: 30px;
margin:0 auto;
}
.section-button1 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 30px;
margin-right: 20px;
}
.section-button2 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}
.section-button3 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}
.section-button4 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}
.section-img-container {
background-color: #008080;
background-position: center center;
width: 270px;
height: 270px;
margin: 0 auto;
}

Answer 1

To avoid using JavaScript, it's possible to use CSS (albeit there has to be some minor adjustments to your HTML in order to do so); so given the amended HTML:
<div id="section-container">
<div class="section-img-container">
<input type="radio" name="images" id="img1" />
<img src="http://placekitten.com/300/300/" />
<input type="radio" name="images" id="img2" />
<img src="http://lorempixel.com/300/300/nightlife" />
<input type="radio" name="images" id="img3" />
<img src="http://lorempixel.com/300/300/people" />
<input type="radio" name="images" id="img4" />
<img src="http://dummyimage.com/300x300/000/f90.png&text=image+lorem+ipsum" />
</div>
</div>
<div id="section-button-container"><div>
<div class="section-button1">
<label for="img1">1</label>
</div>
<div class="section-button2">
<label for="img2">2</label>
</div>
<div class="section-button3">
<label for="img3">3</label>
</div>
<div class="section-button4">
<label for="img4">4</label>
</div>
</div>
</div>
And the following CSS:
#section-button-container label {
display: block;
text-align: center;
height: 100%;
line-height: 30px;
cursor: pointer;
}
input[type=radio],
input[type=radio] + img {
display: none;
}
input:checked + img {
display: block;
}
JS Fiddle demo.
This does require that the browser supports the :checked pseudo-selector and the CSS next-sibling + combinator, however; and takes advantage of the label being able to check/uncheck a radio input (so long as the for attribute of the label identifies the id of the relevant input).
References:
:checked pseudo-selector`.
:checked pseudo-selector compatibility.

Answer 2

For the animation portion investigate this library, used it myself and it works nicely => animate.css
for the changing of the image it is rather trivial here is one way to do it.
$(document).ready(function() {
var viewer = $('img.viewer');
$('a.section-button').click(function () {
viewer.attr('src', 'your new path to new image');
});
});
In the above I added the classes that would be attached to the main view area so you'd have:
<img class="veiwer" />.
You'd just hide this or load up a default image when the page loads.
Also using "section-button" class on each anchor. I didn't account for positioning in the list of choices there meaning 1, 2, 3, 4th picture and so on. It might be easiest to have data-attributes for that on the section buttons. So something like.
<a class="section-button" data-imgrc="path to the large image" data-number="1">1</a>
Note you could also if you just have numbers inside the section buttons just grabber the inner text however personally I prefer data-attributes.