CODEWITHSUNDEEP
css
Ching Ching
Ching Ching

Reputation: 1049

CSS animation Image from small to bigger and center

i have been struggle for animate this image bigger and to centering.

look at this video for sure, it's only 9 seconds.

https://youtu.be/b-5KPH_RGIg

and this is the action

https://jsfiddle.net/09b74624/1/

i'm using :

.biggerCenter {transform:scale(0.1); transition:transform 0.5s linear; }
.biggerCenter:hover { transform:translate(-50%, -50%) scale(1); }

how to get this thing done?

what's wrong with my code?

thanks

Upvotes: 2

Views: 9936

Answers (1)

Simply Me
Simply Me

Reputation: 1587

Your translation does not leave enough space on the sides. Assuming your picture gets 50%, it will need 25% on each side. Here is a working fiddle based on your example.

.biggerCenter:hover
{
  transform:translate(+25%, +25%) scale(1);
}

Also, I would recommend you using a nice plugin. Fancybox does what you need.

Upvotes: 1

Related Questions