Trouble transitioning images between active sections - html

Question

I'm working on a virtual tour which involves the user clicking arrow images depending on the location they wish to go, which will then display a new image of the corresponding location. I would like to gradually transition between the images when the user clicks, however I'm having trouble doing so within this particular context. These are the basics of what I have in my HTML:
<div id="tour_images" class="pics">
<section id="beginning">
<div class ="arrow">
<a href="#two">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<img src="imgs/beginning.jpg" />
</section>​
<section id="two">
<div class="arrow">
<a href="#three">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<div>
<img src ="imgs/two.jpg" />
</div>
</section>
<section id="three">
<div class="arrow">
<a href="#four">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
</div>
<div>
<img src ="imgs/three.jpg" />
</div>
</section>
<section id="four">
<div class="arrow">
<a href ="#beginning">
<img src="turnRight.png" alt="Right Arrow"/>
</a>
<div>
<img src ="imgs/four.jpg" />
</div>
</div>
</section>
And here's my CSS:
section {
display:none;
}
section:target{
display:block;
}
section img {
opacity: 0;
transition: 500ms opacity;
}
section:target img {
opacity: 1;
}
As expected, the targeted sections display on click, however the transition of the images on-click isn't working (rather the images just immediately pop up). Can anyone see what I'm doing wrong here?
UPDATE: I've managed to come up with a solution on this which involves changing the CSS to the following (note there is a button at the beginning that, once clicked, displays the first section):
section {
opacity: 0;
transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-khtml-transition: opacity 1s ease-out;
-webkit-transition: opacity 1s ease-out;
height: 0;
overflow: hidden;
}
section:target{
display:block;
opacity: 1;
height: auto;
}

Answer 1

Depending on the browser and its version you might have to include specific rules:
section img {
opacity: 0;
transition: 500ms opacity;
-o-transition: 500ms opacity;
-ms-transition: 500ms opacity;
-moz-transition: 500ms opacity;
-khtml-transition: 500ms opacity;
-webkit-transition: 500ms opacity;
}
Yes, that is annoying, but sometimes required.