JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pictureContainer">
    <img width="100%" src="http://www.kirupa.com/html5/examples/images/smiley.png">
	</div>

CSS

.pictureContainer {
    height: 150px;
    overflow: hidden;
    width: 150px;
    transition: all 1s ease-in-out 0s;
}
.pictureContainer img {
    position: relative;
    top: 0;
    transition: top 0.35s ease-in-out 0s;
}
.pictureContainer img:hover {
    top: -300px;
}
.pictureContainer:hover {
    overflow: hidden;
    width: 300px;
    height: 300px;
}