How to make a circular mask over an image
This is my trick using only css, but the image is not centered and also the image becomes larger than the mask
I want to achieve the same effect here
http://jackietrananh.com/portfolio.php
It uses the image http://jackietrananh.com/img/sprite-s82d3b02845.png , but how can this happen with pure css or js?
and without
clip-path
+3
source to share
4 answers
I would accomplish it like this 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%;
}
Example: CodePen
0
source to share
.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+ */
}
more here http://www.html5rocks.com/en/tutorials/masking/adobe/
+3
source to share
With css you can set it like background
and place it in the center:
background: url("http://media.trb.com/media/photo/2011-11/241153480-30235112.jpg") no-repeat center center;
Here's a demo: http://jsfiddle.net/shbnts90/3/
+1
source to share
Try 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);
}
+1
source to share