How to create a an image bg with a slide up card overlay.

1

I am new to CSS and web building and I am trying to learn animations etc, I am trying to replicate the service cards from this website Card Slide Example

I have inspected the website and noticed they use a translate 3D code but that doesn’t seem to work in my builder, when I try for example the following:

[.element{
  transform: translateY(0);
  transition: 0.2s ease-in-out;
  overflow:hidden;
}
.element:hover {
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}]

This code makes the card jump all over the place. This is my structure and I am putting the code in the card slider block but not sure if I am doing it right.

scrnli_2m4r1JEp14P7w3
scrnli_2m4r1JEp14P7w3420×578 12.1 KB

Any help would be greatly appreciated.

2

Don’t get confused by the translate 3D code. you just need standard translate-property :wink:

Being able to recreate a Website pattern/component from any website and build it in bricks is an essential skill, but can be hard at the start.

I’ve created the very basics of that card, so you have an easier time understanding it.

Check it out and try to rebuild it. If you need further help let me know :wink:
Cheers Suat

1 Like