Images and text links to move up on hover at the same time

Hi,

I want my text and image (for all 8 boxes) to move up 8px on hover at the same time, but I can't get them to do it succinctly. Basically I want the text to be grouped to the backing image like a card and have the same hover effect.
Also part of the title text turns bold when I hover and I don't want that to happen on this section of the website - just on the navigation bar.

Is there a code to fix this?

Please see attached image for reference.

Thanks,

Password: Test1

Can you share link to page?

Oh whoops, sorry I thought I did. Here we go: https://point-gazelle-ryl5.squarespace.com/projects

On 5/8/2024 at 8:28 AM, VitaminB said:

Oh whoops, sorry I thought I did. Here we go: https://point-gazelle-ryl5.squarespace.com/projects

Try this code for number 01

.fe-block-bb132b0013b8b2070bac:hover+div, .fe-block-bb132b0013b8b2070bac:hover+div+div {
    position: relative;
    top: -8px;
    transition: all 0.7s !important;
}
.fe-block {
    transition: all 0.7s !important;
}

Thanks so much @tuanphan! Thats pretty close, but when I hover over the '01' and 'commercial gateway' rather than on the background image nothing moves up and the background image doesn't fade to 0.7 opacity. Is it possible to do that?

Hi @tuanphan, just checking in if there's any update on this?

(Just a test code for number 1)

.fe-block.fe-block-d079d04bc914709121f5:hover, .fe-block.fe-block-yui_3_17_2_1_1711878683497_116364:hover {
    top: -8px;
    position: relative;
    transition: all 0.7s !important;
}
.fluid-engine:has(.fe-block.fe-block-d079d04bc914709121f5:hover, .fe-block.fe-block-yui_3_17_2_1_1711878683497_116364:hover) div#block-bb132b0013b8b2070bac {
      transition: .3s !important;
    opacity: .7 !important;
    margin-top: -8px;
}
.fluid-engine:has(.fe-block.fe-block-d079d04bc914709121f5:hover, .fe-block.fe-block-yui_3_17_2_1_1711878683497_116364:hover) .fe-block.fe-block-d079d04bc914709121f5{
        top: -8px;
    position: relative;
    transition: all 0.7s !important;
}
.fluid-engine:has(.fe-block.fe-block-d079d04bc914709121f5:hover, .fe-block.fe-block-yui_3_17_2_1_1711878683497_116364:hover) .fe-block.fe-block-yui_3_17_2_1_1711878683497_116364 {
    top: -8px;
    position: relative;
    transition: all 0.7s !important;
}
.fe-block:has(.image-block):hover .image-block {
    transition: .3s !important;
    opacity: .7 !important;
    margin-top: -8px;
}

Hi @tuanphan Thanks so much! 🙂

I kind of wanted that whole 'no. 1' section to move up at the same time when you hover over any of it (so it's not jittery), kind of like a grouped object, but I'm not sure if that's possible?
This is really great if it's not though 🙂 Much appreciate your help!
How do I apply this effect to the other numbers?

Just want to test if that code work for 1 or not, you try adding, if it works for number 1, I will check again and give code for other numbers.

Thanks @tuanphan ! 😊
I've added it, the background image isn't moving up at the same time as the number and title (when I'm hovering over just the background image)