I'm trying to layer the top row of cards on top of the header using z-index on a project using Materialize CSS. Since the cards are now using relative positioning, it causes some of them to move when the card-action is hovered upon (the result is less visible on mobile view since there's only one card per row). I also didn't intend on the card-action text moving to the center when hovered, though I'm okay with that effect. I've tried using absolute positioning as well as changing which element the positioning is applied to. How can I prevent the cards from shifting and still use z-index? Here is my code and link to my (codepen):
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
:root {
--primary-color: #c31432;
--primary-text-color: rgba(0,0,0,0.5);
--primary-text: "Open Sans", sans-serif;
}
* {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
#works-header {
position: absolute;
height: 500px;
width: 100vw;
z-index: 10;
}
#works-header h1 {
font-size: 3rem;
letter-spacing: 1px;
margin: 0 auto;
}
#cards {
position: relative;
top: 400px;
z-index: 1000;
}
.card-image {
cursor: pointer;
transition: all .3s ease;
}
.card-image:hover {
border: 3px solid var(--primary-color);
opacity: 0.85;
}
.card-image:hover .card-title {
display: none;
}
.card-action {
width: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all .3s ease;
}
.card-action:hover {
width: 100%;
position: absolute; /* this prevents cards from shifting due to relative positioning on the card element */
opacity: 0.7;
border-bottom: 2px solid var(--primary-color);
}
.card-tags {
display: none;
}
.card-image:hover .card-tags {
display: block;
position: absolute;
left: 1rem;
bottom: 2rem;
letter-spacing: 2px;
font-weight: 300;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!-- Todos: fix all cards aligned on the right side (card-action does not work properly) -->
<section class="center" id="works">
<div id="works-header" class="black valign-wrapper">
<h1 class="white-text center-align">Check out some of my latest projects</h1>
<p></p>
</div>
<div class="container row" id="cards">
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
<a href="#" class="pink-text">View project</a>
</div>
</div>
</div>
</div>
</div>
</section>One solution is to add a border to card-image, so that you are transitioning just the opacity and color, and not the border size (which in turn recalculates the size of the image and causes the flicker). It's a lot for the browser to process all at once.
.card-image {
cursor: pointer;
transition: all .3s ease;
border: 3px solid black;
}
EDIT:
Sorry, I realised there were two issues.
Ok so you don't need absolute positioning on the header - absolute takes items out of the flow of the page. No need to do that here. Take off the relative from the cards and use a negative margin:
#cards {
top: 400px;
z-index: 1000;
margin-top: -100px;
}
I've removed the absolute positioning from the hover as it's not a good idea. Absolute positioning comes into it's own when you need to finely control an elements positioning. No need for that here. I've also taken the 50% width off and added a default border to prevent flicker on the card action.