Recently, I delved into using HTML & CSS for work.
However, I encountered a major hurdle: creating responsive Grid card elements.
I have four card elements in a column, each with text that increases opacity when hovering over the card. When viewed on a tablet, it should only display 3 cards in a column (2 cards for phones) and resize the text accordingly. I attempted to utilize my usual media queries but they didn't do the trick. The cards wouldn't transition to the next column upon resizing the page.
I scoured Google for examples but couldn't locate anything useful. So, I'm reaching out to see if any of you can assist me.
Best regards :)
My Code:
figure {
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
position: relative;
margin: 10px;
}
figure>* {
grid-area: 1/1;
transition: .4s;
}
figure img {
width: 100%;
height: auto;
}
figure:hover figcaption {
--_i: 0%;
background-color: #ed161f;
}
figure:hover img {
transform: scale(1.2);
}
@supports not (-webkit-mask-clip: text) {
figure figcaption {
-webkit-mask: none;
color: #fff;
}
}
.hover-content {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
opacity: 0;
transition: opacity 0.4s;
background-color: #ed161f;
}
figure:hover .hover-content {
opacity: 1;
}
.hover-content p {
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1.25rem;
margin: 0;
padding-top: 20px;
}
.card-grid {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-columns: auto auto auto auto;
grid-auto-flow: column;
place-content: center;
background: #425a52;
}
@media only screen and (max-width: 1000px) {
.card-grid {
display: grid;
grid-template-columns: auto auto auto;
}
}
@media only screen and (max-width: 800px) {
.card-grid {
display: grid;
grid-template-columns: auto auto;
}
}<div class="card-grid">
<figure>
<img src="/img/hans_jorg.jpg" alt="Portrait">
<figcaption>
<div class="hover-content">
<p>
... has been a municipal council since 1997, city council since 1999, deputy mayor from 2004-2014, mayor since 2014, Federal Board member of the Austrian Municipal Association, state board member of the Salzburg Municipal Association, state chair of municipal representatives
</p>
<p>
Areas of expertise include Finance, Construction, Urban Planning, Social Affairs, Economics, City Marketing
</p>
</div>
</figcaption>
</figure>
<figure>
<img src="/img/hans_jorg.jpg" alt="Portrait">
<figcaption>
<div class="hover-content">
<p>
... has been a municipal council since 1997, city council since 1999, deputy mayor from 2004-2014, mayor since 2014, Federal Board member of the Austrian Municipal Association, state board member of the Salzburg Municipal Association, state chair of municipal representatives
</p>
<p>
Areas of expertise include Finance, Construction, Urban Planning, Social Affairs, Economics, City Marketing
</p>
</div>
</figcaption>
</figure>
<figure>
<img src="/img/hans_jorg.jpg" alt="Portrait">
<figcaption>
<div class="hover-content">
<p>
... has been a municipal council since 1997, city council since 1999, deputy mayor from 2004-2014, mayor since 2014, Federal Board member of the Austrian Municipal Association, state board member of the Salzburg Municipal Association, state chair of municipal representatives
</p>
<p>
Areas of expertise include Finance, Construction,Urban Planning, Social affairs, economics, City Marketing
</p>
</div>
</figcaption>
</figure>
<figure>
<img src="/img/hans_jorg.jpg" alt="Portrait">
<figcaption>
<div class="hover-content">
<p>
... has been a municipal council since 1997, city council since 1999, deputy mayor from 2004-2014, mayor since 2014, Federal Board member of the Austrian Municipal Association, state board member of the Salzburg Municipal Association, state chair of municipal representatives
</p>
<p>
Areas of expertise include Finance, Construction, Urban Planning, Social affairs, economics, City Marketing
</p>
</div>
</figcaption>
</figure>
</div>