Jump to content

How can I move 'Simple List' buttons to the centre of my images?

Go to solution Solved by jpeter,

Recommended Posts

  • Solution

@tuku You can use the following CSS:

/* Setup the parent to allow button to be centered */
.user-items-list-simple .list-item {
  position: relative;
}

/* Add transparent background of black to parent item  */
.user-items-list-simple .list-item::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: rgba(0,0,0,.2);
  z-index: 1;
  transition: all .2s;
}

/* Darken the background when a user hovers over the link or uses the keyboard to focus in on the link  */
.user-items-list-simple .list-item:has(.list-item-content__button:hover):before,
.user-items-list-simple .list-item:has(.list-item-content__button:focus-visible):before {
  background-color: rgba(0,0,0,.6);
}

/* Center the button in the list-item  */
.user-items-list-simple .list-item-content__button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* Bring the content layer on top of the transparent background image */
.user-items-list-simple .list-item-content {
  z-index: 1;
}

Here's an example of the above CSS working:

 

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.