Круг маски в CSS при масштабировании

Question

Я хотел бы использовать этот эффект масштабирования на проекте шахты

http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html

Я использую изображение, имеющее форму круга (PNG). Я попытался сделать содержащий div круглый, используя радиус границы

.view { 
    width: 132px; 
    height: 132px; 
    margin-left: 20px; 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    -moz-border-radius: 66px; 
    -webkit-border-radius:66px; 
    -khtml-border-radius:66px; 
    border-radius: 66px; 
    cursor: default; 
} 
.view .mask,.view .content { 
    width: 132px; 
    height: 132px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
} 
.view img { 
    display: block; 
    position: relative; 
} 
.view h2 { 
    text-transform: uppercase; 
    color: #fff; 
    text-align: center; 
    position: relative; 
    font-size: 17px; 
    padding: 10px; 
    background: rgba(0, 0, 0, 0.8); 
    margin: 20px 0 0 0; 
} 
.view p { 
    font-family: Georgia, serif; 
    font-style: italic; 
    font-size: 12px; 
    position: relative; 
    color: #fff; 
    padding: 10px 20px 20px; 
    text-align: center; 
} 
.view a.info { 
    display: inline-block; 
    text-decoration: none; 
    padding: 7px 14px; 
    background: #000; 
    color: #fff; 
    text-transform: uppercase; 
    -webkit-box-shadow: 0 0 1px #000; 
    -moz-box-shadow: 0 0 1px #000; 
    box-shadow: 0 0 1px #000; 
} 
.view a.info: hover { 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
} 
.view-tenth img { 
    -webkit-transform: scaleY(1); 
    -moz-transform: scaleY(1); 
    -o-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    transform: scaleY(1); 
    -webkit-transition: all 0.7s ease-in-out; 
    -moz-transition: all 0.7s ease-in-out; 
    -o-transition: all 0.7s ease-in-out; 
    -ms-transition: all 0.7s ease-in-out; 
    transition: all 0.7s ease-in-out; 
} 
.view-tenth .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
.view-tenth h2 { 
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); 
    background: transparent; 
    margin: 20px 40px 0px 40px; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
    color: #333; 
    -webkit-transition: all 0.3s linear; 
    -moz-transition: all 0.3s linear; 
    -o-transition: all 0.3s linear; 
    -ms-transition: all 0.3s linear; 
    transition: all 0.3s linear; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
.view-tenth p { 
    color: #333; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
    -webkit-transition: all 0.3s linear; 
    -moz-transition: all 0.3s linear; 
    -o-transition: all 0.3s linear; 
    -ms-transition: all 0.3s linear; 
    transition: all 0.5s linear; 
} 
.view-tenth a.info { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 
    -webkit-transition: all 0.3s linear; 
    -moz-transition: all 0.3s linear; 
    -o-transition: all 0.3s linear; 
    -ms-transition: all 0.3s linear; 
    transition: all 0.3s linear; 
} 
.view-tenth:hover img { 
    -webkit-transform: scale(10); 
    -moz-transform: scale(10); 
    -o-transform: scale(10); 
    -ms-transform: scale(10); 
    transform: scale(10); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
.view-tenth:hover .mask { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

, но при увеличении изображения он показывает прямоугольное поле. Любая помощь в том, как маскировать круг, была бы очень признательна!

Answer 1

.view: hover { 
-moz-transform: scaleX(2); 
-o-transform: scaleX(2); 
-ms-transform: scaleX(2); 
-webkit-transform: scaleX(2); 
transform: scaleX(2); 
} 

Здесь изображение/изображения с точки зрения имя_класса получает масштабируется 2X каждый раз, когда пользователь парит над тем же самым.

Answer 2

Попробуйте использовать проценты (%) вместо пикселей (px).

-moz-border-radius: 25%; 
-webkit-border-radius:25%; 
-khtml-border-radius:25%; 
border-radius: 25%;