Как сделать изображение внутри морфинга алмаза кругом

Question

Я много экспериментировал за последние пару дней с помощью CSS и SVG, чтобы попытаться добиться этого эффекта.

У меня есть образ в форме алмаза, и когда пользователь наводил на него верх, он должен превращаться в круг, и в идеале изображение должно измениться на цвет блока.

Я думал, что сначала смогу сделать это с помощью SVG, и мне удалось получить алмаз SVG, чтобы превратиться в круг, но следующим шагом было иметь цвет изображения/блока, и я думал, что маски могут быть способом! Ближайший я получил: http://codepen.io/anon/pen/ByaaqE

HTML

<div> 
    <span></span> 
    <img src="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" /> 
</div> 

CSS

div { 
    -webkit-clip-path: circle(100px at center); 
    -moz-clip-path: circle(100px, 100px, 100px); 
    clip-path: circle(100px, 100px, 100px); 
    transition: all 0.3s ease; 
    width: 200px; height: 300px; 
} 

div:hover { 
    -webkit-clip-path: circle(40px at center); 
    -moz-clip-path: circle(40px, 40px, 40px); 
    clip-path: circle(40px, 40px, 40px); 
} 

span { 
    display: block; 
    width: 200px; height: 300px; 
    background-color: red; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 100; 
    opacity: 0; 
    transition: background-color 0.7s ease; 
} 

div:hover span { 
    opacity: 1; 
} 

Я мог бы оживить круг, но в тот момент, когда я пытался сделать это прямоугольник не будет работать (и Мне даже не удалось взглянуть на форму бриллианта!).

Я также пробовал использовать чистый метод CSS - хотя он имеет свой собственный набор проблем. Я применил стиль в теге img, и он работает, как я хочу, но, очевидно, изображение вращается. Когда я попытался поместить изображение в div и повернуть изображение в нормальное состояние, у него возникли проблемы. Когда он витал над изображением, он не попадал внутрь круга, несмотря на то, что он переполнен на DIV.

http://codepen.io/anon/pen/jEOMem

Она также имеет проблемы, не имеющие цвет наложения на парении.

Мне было интересно, сумел ли кто-нибудь сделать этот эффект раньше, и если бы они могли пролить свет на него и какие могли бы быть мои лучшие варианты, поскольку у меня заканчиваются идеи!

Answer 1

Это заинтриговало меня, поэтому я подумал, что у меня будет бах.

backface-visibility: hidden; является ключом к предотвращению переполнения изображения родителем, как указано в вашем вопросе.

Вы можете использовать псевдо-элемент (:before) для цвета наложения:

/* FIRST EXAMPLE */ 
 
.wrap { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    float: left; 
 
    border: 1px solid red; 
 
    margin: 150px 0 0 150px; 
 
    overflow: hidden; 
 
    transition: all 0.3s ease .3s; 
 
    border-radius: 0px; 
 
} 
 
.morph { 
 
    -webkit-transform: rotate(45deg) scale(1.5); 
 
    -moz-transform: rotate(45deg) scale(1.5); 
 
    transform: rotate(45deg) scale(1.5); 
 
    float: left; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.wrap:before { 
 
    content: ""; 
 
    background: rgba(207, 0, 0, 0.5); 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    opacity: 0; 
 
    transform: scale(0); 
 
    transition: all 0.3s ease; 
 
} 
 

 
.wrap:hover { 
 
    border-radius: 50%; 
 
} 
 

 
.wrap:hover:before { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
}

<div class="wrap"><img src="http://placekitten.com/g/300/300" class="morph"/> 
 
</div>