Hello,
I am encountering some issues with my code.
I am trying to create a grid that contains several “Services”, with background picture and title for each. So far I have managed to do that by mixing grid and flex-box (maybe not the easiest way?)
Now I want to have the title and background to fade and disappear in order to show a small explanatory text instead about the service.
I have tried to do so by putting a text block on top of the previous block, using absolute positioning and taking the full width / height of the cell and then appearing / disappearing when hovering using either display: none or opacity: 0 , without success. Then I have set the font size to go from 0 to 1rem when hovering, which works but looks bad.
Please find my current code below, if you can help me improve it and find a solution.
Note that I have only worked on the 1st grid case so far and just put background image for the other 8
Thanks a lot.
html code:
<!-- SERVICES -->
<div class="services">
<h2>Services</h2>
<div class="grid">
<div class="image-box box-1">
<div class="text-box">
<h2>Digital Marketing Strategy</h2>
</div>
<div class="description">
<h3>A strategy that covers all the points you need to gain visibility and performance.</h3>
</div>
</div>
<img src="resources/img/Social Media Management.jpeg" alt="Social Media Management">
<img src="resources/img/Website Recommendations.jpeg" alt="Website Recommendations">
<img src="resources/img/Branding Startegy and Market Research.jpeg" alt="Branding">
<img src="resources/img/Content Marketing.jpeg" alt="Content Marketing">
<img src="resources/img/Email Marketing.jpeg" alt="Email Marketing">
<img src="resources/img/Digital Advertising.jpeg" alt="Digital Advertising">
<img src="resources/img/copywirting.jpeg" alt="Copywriting">
<img src="resources/img/interrogation point.png" alt="More">
</div>
</div>
CSS code
/* SERVICES */
.services {
margin-top: 2rem;
}
.services .grid {
--gap: 1rem; /*Declaring a variable called gap and giving a value to reuse later on */
--num-cols: 3; /*Declaring a variable */
--row-height: 20rem; /*Declaring a variable */
box-sizing: border-box; /* This insure the padding won't increase the size of the total container */
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height); /* we want an unlimited number of ?px rows to make the grid */
gap: var(--gap);
}
.services img {
width: 100%;
height: 100%;
object-fit: cover; /* images will maintain their aspect ratio */
}
.image-box {
display: flex;
align-items: center;
position: relative;
}
.services h2 {
font-size: 2rem;
font-weight: 700;
padding: 0.5rem;
text-align: center;
}
.services h3 {
text-align: center;
}
.box-1 {
background-image: url('/Users/aurele/Desktop/Main/Coding/projects/Camille/resources/img/hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-box {
background-color: rgba(0, 0, 0, 0.85);
color: white;
width: 100%;
margin: 0px;
padding: 30px;
}
.description {
position: absolute;
width: 100%;
height: 100%;
}
.description:hover {
color: black;
background-color: white;
font-size: 1.5rem;
border: 1px solid black;
transition: all 700ms ease;
}
.description:hover + .services h3 {
}
.services img:hovers {
opacity: 30%;
}
/* Anything under 1024px */
@media screen and (max-width: 1024px) {
.services .grid {
--num-cols: 2;
--row-height: 15rem;
}
}