using padding on list items with multiple elements inside them

Question

So i have a HTML list where each List item has an image with a header title above it and a box behind the image that transforms on hover. I'm close to getting it to appear the way I'd like, but the list items don't seem to co-operate the way they should. I'm trying to get the box to be directly behind the image and the text to be centered above the box, but currently they are slightly misaligned. Here is a JSFiddle JSFiddle showcasing the List.

an example of one of the list items looks like this:

        
            
                Appointment App

The css is detailed in the JSFiddle. I'm slightly new to Web Dev so forgive me if some of the CSS is redundant.

Andy Hoffman · Accepted Answer

I think you have far too much CSS going on, and many of the styles are redundant, or being overwritten by other styles. But I don't want to focus too much on that, since this isn't a code review, but rather, a solution. I did trim away styles that were unnecessary.

Here is what I changed:

Moved the h6 outside of the link, since users are likely going to click on the large target area of the image, rather than the heading text.
Added display: flex to your anchor and justified its contents to the center.
I set white-space: nowrap on the h6 so that it looks cleaner above the boxes. Here's the result.

.appsList {
  list-style: none;
  display: flex;
  margin: 0 auto;
}

.appsList li {
  position: relative;
  padding: 100px;
}

.appsList .headings {
  color: purple;
  white-space: nowrap;
  margin: 0 0 .75rem;
  font-size: 1.2rem;
}

.linkChange {
  display: flex;
  justify-content: center;
}

.imgs {
  position: absolute;
  z-index: 1;
  display: inline-block;
}

.box {
  position: absolute;
  background: #5FCF80;
  width: 200px;
  height: 200px;
  z-index: -1;
}


/* Box comes immediately after imgs, so it can be selected to transform on hover with imgs */

#imgs:hover+#box {
  transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
  transition: all 1s ease-in-out;
  z-index: -1;
}

.box:hover {
  transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
  z-index: -1;
}

.rotate {
  transition: all 0.5s ease-in-out;
}

.rotate:hover {
  transition: all 1s ease-in-out;
}


  
    Appointment App
    
      
      
    
  

  
    Second App
    
      
      
    
  


  
    Banking App
    
      
      
    
  

  
    Reimburement App

jsFiddle

using padding on list items with multiple elements inside them

Answers (2)

Related Questions