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

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

0 голосов
/ 23 мая 2018

https://ibb.co/jWTW6T.<--- изображение того, чего я хочу достичь </p> 

.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>

] 1

Как получить анимацию перехода границы с мини-квадратным блоком, который анимируется при наведении курсоранад этим элементом.Только оранжевый блок, который был показан на прилагаемом изображении, должен двигаться вместо самой линии.

...