How to make an image inside a diamond shape morph to circle


Tags: html,css,css3,svg,css-shapes

Problem :

I've been experimenting a lot over the past couple of days with CSS and SVGs to try and achieve this effect.

I have a diamond shaped image and when the user hovers over it should morph into a circle and ideally the image should change to a block colour.

I thought at first I could do it using SVG and I managed to get an SVG diamond to morph into a circle but the next step was to have an image/block colour and I thought masks might be the way to go! The closest I got was: http://codepen.io/anon/pen/ByaaqE

HTML

<div>
  <span></span>
  <img src="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" />  
</div>

CSS

div {
    -webkit-clip-path: circle(100px at center);
    -moz-clip-path: circle(100px, 100px, 100px);
    clip-path: circle(100px, 100px, 100px);
    transition: all 0.3s ease;
    width: 200px; height: 300px;
}

div:hover {
    -webkit-clip-path: circle(40px at center);
    -moz-clip-path: circle(40px, 40px, 40px);
    clip-path: circle(40px, 40px, 40px);
}

span {
    display: block;
    width: 200px; height: 300px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    opacity: 0;
    transition: background-color 0.7s ease;
}

div:hover span {
    opacity: 1;
}

I could animate a circle but the moment I tried to make it a rectangle it wouldn't work (and I hadn't even managed to look at the diamond shape!).

I've also tried using a pure CSS method - although that comes with its own set of problems. I applied the styling on the img tag and it works how I want it but obviously the image is rotated. When I tried to put the image inside a div and rotate the image back to normal it had issues. When hovered over the image didn't go inside the circle despite having overflow hidden on the DIV.

http://codepen.io/anon/pen/jEOMem

It also has the problem of not having the overlay colour on hover.

I was wondering if anyone has managed to do this effect before and if they could shed some light on it and what my best options would be as I'm running out of ideas!



Solution :

This intrigued me so I thought I'd have a bash.

backface-visibility: hidden; is the key to preventing the image from overflowing it's parent as mentioned in your question.

You can use a pseudo element (:before) for your colour overlay:

/* FIRST EXAMPLE */
.wrap {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  float: left;
  border: 1px solid red;
  margin: 150px 0 0 150px;
  overflow: hidden;
  transition: all 0.3s ease .3s;
  border-radius: 0px;
}
.morph {
  -webkit-transform: rotate(45deg) scale(1.5);
  -moz-transform: rotate(45deg) scale(1.5);
  transform: rotate(45deg) scale(1.5);
  float: left;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.wrap:before {
  content: "";
  background: rgba(207, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.wrap:hover {
  border-radius: 50%;
}

.wrap:hover:before {
  transform: scale(1);
  opacity: 1;
} 
<div class="wrap"><img src="http://placekitten.com/g/300/300" class="morph"/>
</div>


    CSS Howto..

    Leaflet for R: How to change default CSS cluster classes

    How can I float a bunch of divs and still get overflow?

    How can I set CSS only for specific IE browsers?

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to make both text and image change on rollover via CSS?

    How to solve placeholder CSS difference across different browsers?

    How do I specify my image's position?

    How to place 3 different paragraphs next to each other?

    jQuery on click shows div but it flickers and disappears

    How to force enter key to make a line break inside iframe editor

    How to edit 'clip' CSS property in JQuery?

    How to place the text after thumbnails at the bottom?

    How can I make a button change its position after being clicked?

    How to make a text box have rounded corners?

    How to center div while keeping inside divs on same line in css?

    CSS - how to style a footer

    CSS Tooltip has different position in different browsers. How can I account for this?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to hide Firefox context menu to show my own menu instead?

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    How can I create two columns of text next to each other using CSS?

    How can I disable the color defined in an previously defined CSS class

    How to control layering in HTML/CSS without making links nonfunctioning?

    How to center body on a page?

    Using CSS, how can I get the pseudo-class 'empty' on Element B to affect the styling of Element A?

    Bootstrap with Picture Slideshow

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to Include Multiple Javascript Files in .NET (Like they do in rails)

    How can I align two different-size pieces of text to the left and right while matching baselines?

    How could I achieve the same navigation using CSS3? (currently flash AS3)