다이아몬드 모양의 이미지를 원형으로 만드는 방법

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;은 질문에서 언급 한 이미지가 부모에게 넘치지 않도록하는 열쇠입니다.

/* 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>