animated frame over image and text

Question

Hello!

I have to make animation frame all around picture with expanding text in center.

I don't have a clue how to start frame animation from center top and bottom and end in center left and right + getting text inside larger...

I got illustrative photos on dropbox:

https://www.dropbox.com/sh/vo878z9m45regei/AADwNzF7k8i4cXJMc_vSA73Xa?dl=0

Any help would be appreciate!

Thanks

Answer 1

No need for '@keyframes' and 'animation', but only 'transition'...

Anyway, check this code, default done with 'transition' but where commented css show '@keyframes' and 'animation' way (if you uncomment them, you need to comment the 'transition' related):

https://code.sololearn.com/WCTaJ80ASaL3/#css

Answer 2

Having a new or completary question is not a reason enough to unmark the previous 'best answer' @@

You can avoid the << moves a little bit down >> by many ways... as the idea would be to find a way to to move element without border on the place where it goes with a border added, I would do that just by setting same border style and width in all case, but setting its color to transparent when you don't want display it ;)

Fixed (corrected and added) css rules:

span {
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: 0.5s ease-in-out;
}
span:hover {
border-top: 4px solid #000;
border-bottom: 4px solid #000;
/* transition: 0.5s ease-in-out;
position: */
}

Anyway, you have also a little gap under the image, making padding bottom a little more wide than other ones because of default behaviour of <img> which is inlined and default vertcal aligned to 'baseline' (of text stream)... My previous example implemented this next fix:

img {
margin: 5px;
vertical-align:bottom;
}

Answer 3

*** code edited to better responsive fit in landscape wiew ***

Answer 4

That's fine to fork code... it's the expecting purpose when I try to help: not just give solution, but give keys to customize your own solution ^^

But what was hurted me a few was the best answer mark removed: that doesn't much motivated me to help you further :P

[edit]
And you haven't upvote (or worst remove them after) any of my answers...

Answer 5

Thanks a lot for center text transition code:-) it will be very usefull. I'll try to add now border/frame transition by my self but if there will be any problem i'll ask for your help:-)

Thank a lot!

Answer 6

Hello again!

I managed somehow to make border/frame like on project but... top and bottom border have to show up in full frame width, unlike left and right. I did it but when top border shows up image moves a little bit down. How to do that border top shows up on hover and image stay still ? :)

code link https://code.sololearn.com/WTdcxzcKHq1d

Answer 7

Thank you for a hint. I did not want to offend you or something but changing your code... When I was trying to add transition border I just was cutting and adding some code lines to get final result as close as is on project:-) I dont fully understand the all css properties that's why I mostly running blind:-) Anyway... Thx again for solution it more clear now for me:-)

Answer 8

Sorry again i'm total noob in sololearn activity and frond-end stuff:-) I really do appreciate your help:-)