I am working on my tribute page and am wondering how to create a image overlay: https://codepen.io/michaelnicol/pen/KKmgZxZ
I am trying to re-create what I did from another project: https://codepen.io/michaelnicol/pen/vYmNNMg
When you scroll down to the bottom, the project cards are hoverable with information that appears when hovered over.
No matter what I do I can not re-create this affect. The second I add position: absolute it takes the image overlay out of the normal flow of the document, and sends it to the top of the page.
I use a .image-card container to contain a wrapper with my image, and another division for my .image-desc.
<div class="image-card">
<div class="image-card-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/86/PBHS-facade.jpg">
</div>
<div class="image-desc">
<h4>Pretoria Boys High School</h4>
<p>Elon Musk's...</p>
<button>Vist</button>
</div>
</div>
I used CSS grid and tried to get the elements to occupy the same space on the Grid. The two divs overlap. Any attempt at using a set size for the rows and columns for the grid just cause the image to move on the page and not resize.
The problem is that the image seems to be locked into one size and no matter what I do I cannot get it to size down. The overlay hover transition does nothing and no CSS I use affects the image itself.
Even removing the .image-card container using display does nothing on the image.
.image-card {
height: auto;
display: none; /* Does Nothing */
box-shadow: 2px 2px 5px black;
transition: 0.7s ease-in-out; /* Ease-in-out not working, appears instantly after timer */
min-width: 250px;
display: grid;
/* grid-template-columns: 100px; Just causes the image to overlap the text to the right
grid-template-rows: 100px; */
}
.image-card-wrapper, .image-desc {
margin: 0px;
grid-column: 1;
grid-row: 1;
width: 25%; /* Does Nothing */
height: auto;
}
.image-desc {
height: 100%;
width: 100%;
margin: 0;
visibility: hidden;
background-color: black;
opacity: 0.7;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 1s ease-in-out;
}
.image-card:hover .image-desc {
visibility: visible;
cursor: pointer;
}
Does anyone have any ideas on how to get one div to overlay one another, and both div’s be sizeable (in percentages)? I see a lot of examples where they put the divs next to each other and change the margin of one image, such as -x number of pixels top the left, to overlap them. But this is highly unresponsive and doesn’t work as the image changes size.
