I am trying to create a grid of images that display descriptions over a faded-out version of the image when the user hovers over said image. My current progress can be seen below and at this JSFiddle.
div#grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
width: 95%;
margin: 15px auto;
div {
margin: auto;
overflow: hidden;
// cursor: pointer;
background-color: black;
color: white;
img {
height: auto;
max-width: 100%;
}
p {
display: none;
position: relative;
padding: 0;
top: -40px;
left: 10px;
margin: 0;
}
&:hover {
img {
opacity: 0.35;
}
p {
display: block;
}
}
}
}<h2>Grid Test</h2>
<div id="grid-container">
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
<div class="">
<img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
<p>A beautiful rock structure.</p>
</div>
</div>As you can see in my example JSFiddle, what I am doing currently has these nasty black bars, as well as a resizing issue due to the relative placement popping up. I can get rid of the relative black bar using margin-bottom, but it still doesn't fix my issue with needless resizing.
Ideally, I would like to have an entire div over the image so I could position things within that div, but I have no idea how I could go about that without making a complete mess. I would like some assistance with how I could go about this logically with the following constraints:
- I'd prefer to not use JavaScript, but I am not 100% against it. But certainly no frameworks.
- I do not want to make the images
background-images of mydivs. - The images must be resizable. (though it may be worth noting that the initial size of the images is known)