a { position: relative; } .photo-container { border: 2px solid #333; width: 180px; height: 180px; background-color: #bbbbbb; } .no-image { color: #7f7f7f; font-size: 80px; top: calc(50% - 40px); left: calc(50% - 40px); } .photo { width: 100%; height: 100%; background-size: cover; background-position: center; } .button { border: 0; padding: 0; text-align: left; } .info { background-color: rgba(0, 0, 0, 0.6); color: white; font-size: medium; position: absolute; bottom: 0; left: 0; padding: 5px; width: 100%; } a:hover .info { background-color: rgba(0, 0, 0, 0.8); } a:hover .photo-container { border-color: #000; } .directory-name { width: 180px; white-space: normal; }