with grid and flex properties i'm trying to let my info-box overflow a bit over my image instead of having it right below. Is there any suggestions to make it possible?
So far I tried the simple techniques of grid. I made a whole container for both the img and info-box. Thereafter I wrapped my info-container as an grid to try to move it up so it could overflow my img.
<div class="info-container"><figure><img src="./src/assets/images/case-study-photo2.jpg" alt="" /></figure><div class="wrapper"><div class="info-box"><div class="info-item"><h4>Case Name</h4><p>Taxes & Efficiency</p></div><div class="info-item"><h4>Category</h4><p>Business</p></div><div class="info-item"><h4>Date</h4><p>27th September 2022</p></div><div class="info-item live-preview"><a href="#" class="btn">Live Preview</a></div></div></div></div><style> .info-container { display: grid; grid-template-columns: 1fr minmax(0, 70ch) 1fr; column-gap: 1rem;>* {grid-column: 2;}> img { grid-column: 2; max-block-size: 300px; inline-size: 100%; object-fit: contain; } } .wrapper{ display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 0; gap: 1rem 2rem; } .info-box { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; align-items: center; background-color: #1e1e1e; padding: 1.5rem 2rem; border-radius: 12px; color: #fff; flex-wrap: wrap; } .info-item { text-align: center; flex: 1; margin: 0.5rem 0; } .info-item h4 { font-size: 1rem; margin: 0; padding: 0; line-height: 1.2; color: #ccc; } .info-item p { font-size: 0.875rem; margin: 0; } .live-preview .btn { background-color: #f7b500; color: #000; padding: 0.75rem 1.5rem; border-radius: 24px; text-decoration: none; font-weight: bold; display: inline-block; margin: 0 auto; } .live-preview .btn:hover { background-color: #e0a400; } @media (max-width: 768px) { .info-box { flex-direction: column; text-align: center; } .info-item { margin-bottom: 1rem; } .live-preview { margin-top: 1rem; } }</style>