Show text in image box (before image is shown) - html

Question

Fiddle URL: https://jsfiddle.net/e8h0jb4a/1/.
<article><span>1</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>2</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>3</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>4</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>5</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>6</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
html{
font-size: 18pt;
}
body{
background-color: black;
font-family: "PT Sans", "Arial", sans-serif;
font-size: 20pt;
color: white;
padding: 0.5rem;
margin: 0.8rem;
display: flex;
flex-flow: row wrap;
gap: 0.5rem;
justify-content: center;
}
article{
border-style: solid;
border-color: #202020;
border-width: 1.5pt;
padding: 0;
width: 9.5rem;
height: 7.5rem;
background-color: #101010;
transition: 202ms;
text-align: center;
box-sizing: border-box;
font-size: 50pt;
cursor: pointer;
}
img{
object-fit: cover;
height: 100%;
width: 100%;
display: block;
opacity: 0;
transition: 202ms;
}
article:hover{
background-color: #1f1f1f;
}
.open{
cursor: default;
}
.open span{
display: none;
}
.open img{
opacity: 1;
}
.open:hover{
transform: scale(1.8);
}
$('article').click(function() {
$(this).addClass('open');
});
You see that each card has some text on it. Once you click a card an image is shown and the text disappears. So far so good. Now I want to get the text vertically centered in each box. And I want the box which you can click for the image to be shown just the visibile box (at the moment you can click below too because of the text which takes up space).
I tried to solve this with absolute position of the text. The problem then is that the animation when you hover images brings the images below the other boxes.
How would you solve the problems? I'm looking for css only changes. Is there even a nice way with my html code or does the html code need to changed as well?

Answer 1

Try using Flexbox. You can use the align-items: center property to vertically align your text, and justify-content: center to horizontally align your text. You could also use text-align: center for this. Don't forget to set display: flex, otherwise, Flexbox will not be used.
This website is very useful for understanding Flexbox.

Answer 2

So for aligning text vertically center you can use CSS property.
article{
line-height:7.5rem; //value same as the height
}
And for hiding the image when user clicks on different element
$('article').click(function() {
for(var i=0;i<$("article").length;i++){
$("article").eq(i).children().eq(0).css("display","block");
$("article").eq(i).children().eq(1).css("opacity","0");
}
$(this).children().eq(0).css("display","none");
$(this).children().eq(1).css("opacity","1");
});
Instead of adding a class you can use this method.
Edit
You were able to click beneath the article because there was image with opacity:0; so to fix this problem you can use display:none;
Here is the code
img{
display: none;
}
.open img{
display:block;
}
And you can use the default JS code i.e
$('article').click(function() {
$(this).addClass('open');
});
Fiddle https://jsfiddle.net/vrf58L4s/5/