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 do you show just the first line of text of a div and expand on click?

    How to fade multiple background colors after few seconds? [duplicate]

    How to push image (behind canvas) to front in order for its onclick function to work

    How to show the first N elements of a block and hide the others in css?

    How to position
    below rest of elements

    How to use different kind of Google Font types?

    How to choose fontstacks

    How to adjust the width of a DIV per height using CSS

    CSS: how to set width to children's width?

    JavaScript CSS how to add and remove multiple CSS classes to an element

    GTK+ 3 CSS: How to specify text alignment for a label?

    JqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed

    How to fix clipped text over 3D transform image on Safari?

    How would I go about setting a CSS gradient background in JavaScript?

    How to force Jade not to indent block tag?

    How would I re-position my 2nd bg image “ url(repeat_bg_right_side.png) ” to the right side of page using css?

    How does HTML/CSS determine the size?

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    How to place div in top right hand corner of page

    How to script CSS to achieve hide/appear effect based on hover

    How to style DOM element with CSS that was created with JavaScript function

    How to align social media icons in one row?

    How do I get the element after my horizontal css navigation bar to appear below it?

    How to use javascript/css to navigate through a pure css carousel/slideshow?

    Outlines and Borders not showing at all in IE

    How to make a blur effect over a shape in CSS?

    How to style object when the user clicks it

    img not showing in Safari in attempt to make img map responsive

    How can I center a div within another div?

    How to match an index of a CSS class with JavaScript?