<!-- 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.