How to make a round mask over a image


Tags: javascript,css,mask

Problem :

This is my take using css only, but the image is not centred, and also the image get bigger not the mask

jsfiddle Demo

I want to achieve the same affect in here

http://jackietrananh.com/portfolio.php

He is using an image http://jackietrananh.com/img/sprite-s82d3b02845.png but how this can happen with pure css or js?

and without

clip-path


Solution :

I would accomplish this as follows: 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


    CSS Howto..

    How to improve this code to combine/compress CSS using PHP [closed]

    How to add css to linked rails imge

    How to align TH Header with TD in TBody

    How to get the profile pic aligned center?

    How to get just numeric part of CSS property with jQuery?

    How to move stacked columns up (using bootstrap but any css will do)

    How to make text appears alitter above using html and css

    how to get double border in using CSS?

    Ionic Side Menu Not Showing Content

    How to see the print media CSS in Firebug?

    How can I make the first letter push itself into the paragraph like a newspaper style

    How to make image clipping in css

    How to replace flex in this layout?

    How to structure css using BEM methodology for adaptive web pages?

    How to use a CSS for only one div and not the rest of the code?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How do I install and use Groundwork CSS

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to reference css and script files into a node.js app?

    How to prevent rendering css when loading stylesheet from local storage?

    How to keep an image and text (vmax font) aligned when resizing browser?

    How to create rating system using only css [duplicate]

    How can I make jQuery's draggable function expand the container?

    How to change placeholder color on focus?

    How to display heading and paragraph elements inline in css?

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    How to add css to a single mvc Helper method when validation fails - from within the model

    How to display “a” to full of the line

    How to make text responsive to div size?

    Test if is visible with ng-show attribute