0

I'm trying to realise the following:

On hover an item,

I would like the background color of my container to change with a new transition.

For this I am thinking to use a shape mask by css like a circle shape. on hover the item, the background shape will scale down to 0, then rescale at 100% with a different color. To give a bit of a nice animation.

I have the transition fine working in the fiddle below:

https://jsfiddle.net/cvcaa9k9/

However, as I would like it to have the full shape of the container, how can I achieve this ?? If I set up the circle shape to 100% nothing get display . . .

Any idea how it can be done ? Basically, I just need the shape to be done with a width and a height of 100% . ..

below my css:

.element {   
background-color: #c0392b;
color: white;
width:500px; 
height: 500px;
margin: 30px auto;
text-align: justify;
 transition: all 3s ease;
 /* new function syntax for webkit browsers */
 shape-inside: circle(210px);
 -webkit-clip-path: circle(210px);
  shape-padding: 15px;
}

Thanks for all your time, I really appreciate !

tibewww
  • 593
  • 4
  • 11
  • 32
  • Couldn't understand what you meant. Is [this](https://jsfiddle.net/cvcaa9k9/1/) what you need? If not, can you show us the demo that is *not* working so I can get a clue as to what you are looking for? – Harry Jan 13 '17 at 14:06
  • I got it working and update the jiddle at the end :) The only thing, is I would like at the end of the animation the background to stay yellow .. . if you have any solutions ? – tibewww Jan 13 '17 at 14:30
  • add a large transition delay to make it look like its staying? – Persijn Jan 13 '17 at 14:34
  • Do you mean like [this](https://jsfiddle.net/cvcaa9k9/2/)? @tibewww. – Harry Jan 13 '17 at 14:34
  • beautifull @Harry Thanks a lot !!! – tibewww Jan 13 '17 at 14:35
  • You're welcome @tibewww. By the way why are you using `shape-inside`, `clip-path`, `mask` etc for this one? I am sure you could achieve this with just one pseudo-element and transforms. – Harry Jan 13 '17 at 14:40
  • Hmmm, not ur how i Could do that, I went for what I know... seems i have the same problem with the height, as my effect should be on a very long page, 100vh is not enough, any way to have a full height on this automatically do you think ?? ( with 100%, the animation doesnt start from 'the middle of the circle' so it looks odd) – tibewww Jan 13 '17 at 14:51
  • Can you create a demo with the code that has problem? – Harry Jan 13 '17 at 15:01

0 Answers0