How do I fix the image size when changing to another image?

I am learning how to do a slideshow with CSS, HTML and Javascript, everything seems to be fine but when I click on next or prev the current image gets bigger and it stays on the screen for a few seconds. I am using images with different sizes, but I added a width on CSS -> img{width:100%;}. It could be something related with the margins as well but that doesn't seem to be the problem.

Here is some code that might help you understand the problem:

figure
{
    position:absolute;
    opacity:0;
    transition:1s opacity;
    margin:0;
    border-left:solid 2px black;
    border-right:solid 2px black;
}

figure.show
{
    opacity:1;
    position:relative;
    transition:1s opacity;
    margin-right:15%;
    margin-left:15%;
} 

Also there is a space between the image and the bottom div. I am doing this on c9.io and I don't have this problem there, could it be something on codepen that is causing it?
You can check the code out here: http://codepen.io/iikinz/pen/BiLeJ