KPC
Kevin Powell - Community•2mo ago
MC23

Card "flip animation" without position absolute

I was looking for a way to have a flip-on-hover card without using position absolute. So far this solution with absolute is working: https://codepen.io/n00bCod3r/pen/azoJYJP and could be used to provide me some insights on how to achieve what I want I tried using background image on the --front element but unfortunately that didn't work. Please ping on replies 🙏🏻 Also I'm going to sleep soon so if I don't reply it's for that
2 Replies
Chris Bolson
Chris Bolson•2mo ago
Why don't you want to use absolute positioning? It should work for what you want to do ... ah, you are missing the position on the parent element so perhaps that is why you are having issues? As you don't say what the problem is, it is hard to know what the solution might be. If for some reason you don't want to use position absolute, you could achieve the same by using grid and placing the front and back in the same area like this: 
.card__inner{
  display: grid;
  ... other sytles
}
.card__content{
  grid-area: 1/1;
  ... other styles
}
.card__inner{
  display: grid;
  ... other sytles
}
.card__content{
  grid-area: 1/1;
  ... other styles
}
MC23
MC23OP•2mo ago
The problem is that I don't understand why it works like that, and I don't wanna use code I don't understand. Anyway I found another way for my use case that solved the proble. The grid solution seems interesting so I'll try it someday, thanks

Did you find this page helpful?