Images replace each other when hover

CSS Part

.block {
width: 300px;
height: 300px;
float: left;
margin: 50px;
background: #edebee;
overflow: hidden;
position: relative;
}
.block img.first {
left: 0px;
}
.block img.second {
right: -100%;
}
.block:hover img.first {
left: -100%;
}
.block:hover img.second {
right: 0px;
}
.block img {
position: absolute;
display: block;
width: 100%;
transition: all 0.25s ease-out 0s;
}
.block a {
display: block;
}

HTML Part

<div class="block"> <a href="#"><img class="first" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxY2b9sEcfLDOIABH7wedrZf5j0nS2vfAytNThQVjyg-UlCqidlmimNHfGcfXmnJJgV6FmPAxi_csjM9nRQp55oo0MF-noT97Audoposa1-H8Lw_oEuf-dLwCNOM0onSeizSXifc1Wd7s/s1600/green_dress2-300x400.jpg" /></a>

<a href="#"><img class="second" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklpu75z_pzHbcOq08fQ8C-ooa7_thxKBdM8MaNTMW9n9sDB5X_5-Kin9cDEsDaKCxoGyxtaKGOp5MkeqS7ANaCLt9efAqZjjm-uJskBLWjhcdsJWSHPG0RM1pnhmLf1DeV_od4h0aUuM/s1600/green_dress-300x400.jpg" /></a>
</div> 

DEMO