body { font-family:Arial, sans-serif;margin:0;padding:0;} .container { display:flex;flex-wrap:wrap;justify-content:center;} .square { width:300px;height:300px;margin:10px;text-align:center;position:relative;transition:filter 0.2s;} .square img { max-width:100%;max-height:100%;} .square .project-name { position:absolute;top:10px;left:10px;font-weight:bold;text-transform:uppercase;font-size:20px;opacity:0;color:white;transition:opacity 0.2s;} .square:hover .project-name { opacity:1;} .square:hover img { filter:brightness(60%);} @media screen and (max-width:768px) { .container { flex-direction:column;align-items:center;height:auto;} .square { width:calc(50% - 10px);} }