Match custom css with html ul/li structure

I have now migrated the site to live….

Here is what CSS does now and here is the code doing it.

/******** Store Card - Grid View *******/

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper .store-content,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  font-family: inherit;
  border-radius: 25px;
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-content .store-info,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper .store-content {
  width: 100%;
  height: 36rem;
  border-radius: 25px;
  border: 1px red solid;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  color: $color-primary-white;
  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
}

#store-info img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    transition: opacity .2s ease-out;
	border: 3px solid pink;
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-data h2 {
    position: absolute;
    inset: auto auto 30px 30px;
    margin: 0;
    transition: inset .3s .3s ease-out;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
	border: 3px solid pink;
  }
/*
  p, a {
    position: absolute;
    opacity: 0;
    max-width: 80%;
    transition: opacity .3s ease-out;
  }
  
  p {
    inset: auto auto 80px 30px;
  }
  
  a {
    inset: auto auto 40px 30px;
    color: inherit;
    text-decoration: none;
  }
  
  &:hover h2 {
    inset: auto auto 220px 30px;
    transition: inset .3s ease-out;
  }
  
  &:hover p, &:hover a {
    opacity: 1;
    transition: opacity .5s .1s ease-in;
  }
  
  &:hover img {
    transition: opacity .3s ease-in;
    opacity: 1;
  }

}

.material-symbols-outlined {
  vertical-align: middle;
}
*/
/******** Store Card - Grid View *******/

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper .store-content,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  font-family: inherit;
  border-radius: 25px;
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-content .store-info,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper .store-content {
  width: 100%;
  height: 36rem;
  border-radius: 25px;
  border: 1px red solid;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  color: $color-primary-white;
  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
}

#store-info img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    transition: opacity .2s ease-out;
	border: 3px solid pink;
}

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-data h2 {
    position: absolute;
    inset: auto auto 30px 30px;
    margin: 0;
    transition: inset .3s .3s ease-out;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
	border: 3px solid pink;
  }
/*
  p, a {
    position: absolute;
    opacity: 0;
    max-width: 80%;
    transition: opacity .3s ease-out;
  }
  
  p {
    inset: auto auto 80px 30px;
  }
  
  a {
    inset: auto auto 40px 30px;
    color: inherit;
    text-decoration: none;
  }
  
  &:hover h2 {
    inset: auto auto 220px 30px;
    transition: inset .3s ease-out;
  }
  
  &:hover p, &:hover a {
    opacity: 1;
    transition: opacity .5s .1s ease-in;
  }
  
  &:hover img {
    transition: opacity .3s ease-in;
    opacity: 1;
  }

}

.material-symbols-outlined {
  vertical-align: middle;
}
*/

Container (white) seems out of bounds. Probably cause content is outside ?!

Image seems to behave quite well. Now I need content to jump on top of image. H2 does not do that. Why? And after that P and a etc.

Again this is what I try to accomplish. Heading (Pink border always on together with logo) and content slides in nicely on mouse over.

I would like entire container to link to “visit store” and then remove this button. Inquiry I guess slides in with content…. (not sure)

Thx. I really appreciate any help…

Thx bcworkz

Wrap the entire card. Is that not what I do? Can you show a code example on what you mean?

Buttons – Z index, right. I wish the card/container to link to the store, and that would erase the visit store button.

I want the card to behave as the example I linked to yes. Store Name permanently visible (H2) and also logo not sure where, I guess I will need to get the hooks right and then mess with it, so logo z-index 100 is fine as it is on top of all. Border around the logo may go away. Not sure yet. Maybe a box-shadow for seperation from the background image, that for one can be bright, and for another light….

Initially hidden will be store data and review. They slide in on mouse over. Also inquiry button slides in with data. I want a clean card initially (Store name and logo).

Agree html is very much different than the source example. And that’s where I get a bit lost. I hang on to should be possible though.

I am focusing on one thing at a time. That’s why part of css is set to “don’t read”.

Animations are not yet done, so yes the are incorrect. I need help to figure this out thx.

I need to set height of image. Not sure how.

This seems to have effect:

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-data h2 {
    position: absolute;
    inset: auto auto 30px 30px;
    margin: 0;
    transition: inset .3s .3s ease-out;*/
  /*  font-family: 'Roboto Condensed', sans-serif;*/
    font-weight: normal;
    text-transform: uppercase;
	border: 3px solid pink;
  }

Alright – Image filling container is solved

H2 colour is also solved It has an absolute value, but it’s set from a store styling interface, and I keep it there.

H2 border radius is not really an issue.

Hide “Visit Store” button is solved.

Making the card a link to store is solved adding a snippet to functions.php. But that makes only the top half a link and not the bottom (Footer). Why? and how to fix…. Z index or?

Placing the Avatar bugs me. Inside the shortcode calling the store cards, I can set column attributes 2 or 3 or 4 or 5 columns, hence, the avatar jumps around since it’s absolute reference is the bottom half (The footer) of the card. That means it goes outside of it’s container. I will place it top right, diagonal to data.

I have perfected it for 2 columns responsive all screens (inset %) like so:

/****** Avatar - Placement of store logo ******/
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-5 .store-footer .store-avatar,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-4 .store-footer .store-avatar,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-3 .store-footer .store-avatar,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer .store-avatar {
	box-shadow: rgba(250, 230, 220, 0.12) 0px 2px 4px 0px, rgba(250, 230, 220, 0.32) 0px 2px 16px 0px;
    position: absolute;
    inset: auto 5% 150% auto;
    margin: 0;
	padding: 0;
    transition: inset .3s .3s ease-out;
	border: 0px white solid;
	background: none;
  }

Only to screw up when switching to 3, 4 or 5 columns. What I would really want, is top right corner to be the reference and inset with 5% to top and 5% to right. But it refers to the footer.

If I set footer to 100% height text and content jumps to top of image…. or what’s the solution?

Any suggestions to placing Avatar correct?

2 column

3 column

4 column

5 column

They are set seperate, thx. first one includes attributes above. The last 3 only have this code:

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-3 .store-footer .store-avatar {
	box-shadow: rgba(250, 230, 220, 0.12) 0px 2px 4px 0px, rgba(250, 230, 220, 0.32) 0px 2px 16px 0px;
    position: absolute;
    inset: auto 5% 190% auto;
   }

Do I need to repeat box-shadow and position for column 3-5?

For column 4 and 5 footer data vanish???

For h2 in footer transition does nothing (the one that’s supposed to slide up on mouse over)

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer h2 {
    position: absolute;
    inset: auto auto 30px 30px;
    margin: 0;
    transition: inset .3s .3s ease-out;
  }

Now looking at footer. Source code use p and a identifiers. Through inspector I go this way and footer disappears as supposed, but also H2 title dissapears initially…. why?

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer p,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer a {
    position: absolute;
    opacity: 0;
    max-width: 80%;
    transition: opacity .3s ease-out;
  }

Continuing through to the end is what’s active in the cards now. Part a step in the right direction. Part a mess. Everything keeps moving around.

#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer p {
    inset: auto auto 80px 30px;
  }
  
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer a {
    inset: auto auto 40px 30px;
    color: inherit;
    text-decoration: none;
  }
  
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer:hover h2 {
    inset: auto auto 220px 30px;
    transition: inset .3s ease-out;
  }
  
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer:hover p,
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-footer:hover a {
    opacity: 1;
    transition: opacity .5s .1s ease-in;
  }
  
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-content .store-info:hover {
    transition: opacity .3s ease-in;
    opacity: 1;
  }

}

I will add Z-index to H2, cause I think it hides at the back….

Source code:

  &:hover h2 {
    inset: auto auto 220px 30px;
    transition: inset .3s ease-out;
  }

What does & do? Do I need it or remove it?