How to animate scale and move image without hover
Hi, experts
I would like to learn how to animate scale image from 100% to 50% and move to a place 50px below without rollover a button
Thanks
I would like to learn how to animate scale image from 100% to 50% and move to a place 50px below without rollover a button
<div class="hero-text-box">
<img src="img/Z_image.png" alt="cta" class="cta">
</div>.hero-text-box{
position: absolute;
width: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
} Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I have one more question.... I would like img to end up 10 px above bottom of page and always stay the same position no matter what browser size is.... i try change the number but img would go out the page ... any suggestion ? thanks
Try using position: fixed; and a bottom position instead of a top position.
Technically this should be asked in a separate question as it does not pertain to the subject of this question. If you need further information, please ask a new question.
position: fixed;
// top: 50%; REMOVE THIS LINE
bottom: 10px;
left: 50%;Technically this should be asked in a separate question as it does not pertain to the subject of this question. If you need further information, please ask a new question.
ASKER
Thanks, I have open another question here https://www.experts-exchange.com/questions/28966620/CSS-Animation.html
ASKER