using padding on list items with multiple elements inside them - css

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:
<li>
<a href = "" class="linkChange">
<h6 class ="headings">Appointment App</h6>
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
<span class="box rotate" id = "box"></span>
</a>
</li>
The css is detailed in the JSFiddle. I'm slightly new to Web Dev so forgive me if some of the CSS is redundant.

Answer 1

Instead of using a <span> after your <img> tag, instead put your image in a <div> and apply the background to that div. Also remove the position: absolute; that you have on .imgs and .box.
<div class="box rotate" id = "box">
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>

Answer 2

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;
}
<ul class="appsList">
<li>
<h6 class="headings">Appointment App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/calendar.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Second App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/brain.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Banking App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/bank-building.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Reimburement App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/cash-in-hand.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
</ul>
jsFiddle