 <p>About the gap under the image, it's displayed inline :</p> <pre><code>img { display: block; /* this will fix bottom gap */ width: 100%; } </code></pre> <p>About your images size :</p> <p>Just use images of the same size will fix your situation. Otherwise try forcing them with css</p> <pre><code>figure img {width:1280px;height:960px;margin-right:15%;margin-left:15%;} </code></pre> <p>About i can i do the transition and more ... well, not to sound arsh or nothing, but .. keep studying. You are quite asking too much in a single question.</p>