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!
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments