Как добавить квадрат, который движется по границе перехода

.image-client {
    width: 100%;
    margin: 50px auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.image-client-diamond {
    width: 50%;
    padding: 10px;
    margin-bottom: 30%;
    position: relative;				
}

.image-client-diamond-inner {
    width: 69.5%;
    height: 0;
    border-radius: 12px;
    border: 2px solid orange;
    padding-bottom: 69.5%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);

}
img {
    width: 100%;
    transform: rotate(-45deg);
}

<div class = "image-client">
    <div class = "image-client-diamond">
        <div class = "image-client-diamond-inner hover-image-client">
            <img src = "http://news.nationalgeographic.com/news/2009/09/photogalleries/new-hubble-camera-first-pictures/images/primary/090909-01-hubble-new-camera-upgraded_big.jpg"/>
        </div>
    </div>
</div>