Jump to content

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

Recommended Posts

Posted (edited)

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

Screenshot 2024-05-06 at 13.34.02.png

Edited by VitaminB
-
Link to comment
  • Replies 4
  • Views 266
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.