<!-- Brand Box -->
				<div class="home-col1-brand-box">
					<div class="home-col1-brand-item">
						<a href="#">
							<img src="https://www.minisgallery.com/images/icons/dnd-new-icon.gif" width="100%" alt="D&D"> 
							<div class="home-col1-brand-label">Dungeons & Dragons Big Bad Name I</div>
						</a>
					</div>
				</div>
.home-col1-brand-box {
    display: flex;
    flex-direction: column;
    width: 180px;
    margin: 15px;
}

.home-col1-brand-item a {
    width: inherit;
    height: 180px;
    border: 4px solid #9C9C9C;
    border-radius: 15px;
    box-shadow: 0 0 7px 0px black inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #9C9C9C;
    font-weight: 600;
    font-family: Calibri;
    text-decoration: none;
	position: relative;
	padding: 2px;
}

.home-col1-brand-item a:hover {
    border-color: #620000;
    background: #DFC7C7;
	box-shadow: 0 0 10px 0px #620000 inset;
    color: #620000;
}

.home-col1-brand-label {
    /* margin-top: -18px; */
    background-color: transparent;
	text-shadow: -2px -1px 3px #fff, 2px -1px 3px #fff, -2px 1px 3px #fff, 2px 1px 3px #fff;
    margin-left: 2px;
    margin-right: 2px;
    text-align: center;
	position: absolute;
	bottom: -8px;
	z-index: 2;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.