CSS animation question

Question

Hello,

I was trying to make a website where you display an image. I wanted to have a sort of flip card flipping animation to show the rest of the images. The animation works but it’s a bit junky. If you could help, it would be very much appreciated.

Here is the website I’ve been making:
https://sololearn.com/compiler-playground/Wlxqk57g2B26/?ref=app

Thank you

Answer 1

The Coder why are you making it so complicated

see only 3 line of js was needed:-

https://sololearn.com/compiler-playground/WnU8LtQM8Aw3/?ref=app

Answer 2

I wanted to add more images in the div which the effects would apply to.

Answer 3

there is a way without using js, just use:

img { content: url(); }

img:hover { content: url(); }

Answer 4

Alhaaz Thanks but that wasn’t the effect I wanted. The effect I wanted was to make the image at the back goes to the front and replaces the front image.

Answer 5

Captain Thunder ⚡ Thank you for your comments. I did what you said but there wasn’t any visual difference.

Answer 6

Mihaly Nyilas Thanks but that wasn’t the effect I was looking for.

Answer 7

The Coder Wrap the whole js code into

window.onload =()=>{

// Your existing js code

}

It happens because the js code is running before the DOM or simply the window is loaded completely,

Doing the above practice will remove the code as the js runs only after the window is loaded

In Sololearn web preview, the JS part is not like a separate file , in that case you have to add a script tag of that js file into your HTML.

Maybe this help

Answer 8

But this would create a whole new ui ... Maybe not what you needed, but cool enough and that ui is quite bit trending now