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

Question

Это мое взятие с использованием только CSS, но изображение не по центру, а также изображение становится больше не маска

jsfiddle Demo

Я хочу, чтобы достичь тот же эффект здесь

http://jackietrananh.com/portfolio.php

Он использует изображение http://jackietrananh.com/img/sprite-s82d3b02845.png, но как это может случиться с чистым CSS или JS?

и без

clip-path 

Answer 1

Я бы сделать это следующим образом: HTML:

<div class="round"> 
    <img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/> 
</div> 

CSS:

.round{ 
    width:10%; 
    padding-top:10%; 
    overflow:hidden; 
    position:relative; 
    border-radius:50%; 
} 
img{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    min-width:100%; 
    height:100%; 
    transform:translate(-50%,-50%); 
    transition: 1s ease; 
} 
img:hover{ 
    height:110%; 
} 

Пример: CodePen

Answer 2

С помощью CSS вы можете установить его в качестве background и позиционирование его в центре:

background: url("http://media.trb.com/media/photo/2011-11/241153480-30235112.jpg") no-repeat center center; 

Вот демо: http://jsfiddle.net/shbnts90/3/

Answer 3

.avatar-frame{border: 2px solid #c7b89e;} 
.avatar-frame,.avatar-frame img{ 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 30px; /* Saf3+, Chrome */ 
    border-radius: 30px; /* Opera 10.5, IE 9 */ 
    /*-moz-border-radius: 30px; Disabled for FF1+ */ 
    } 

больше здесь http://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 4

Попробуйте FIDDLE

.circle { 
margin: 20px 0 0 20px; 
-moz-border-radius:50%; 
-webkit-border-radius:50%; 
border-radius:50%; 
width:200px; 
height:200px; 
overflow: hidden; 
-webkit-transition: all 0.7s ease-out; 
-moz-transition: all 0.7s ease-out; 
-o-transition: all 0.7s ease-out; 
transition: all 0.7s ease-out; 
} 
.circle>img{ 
    width:100%; 
    height:100%; 
    max-height:100%; 
} 
.circle:hover { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
}