Why are my CSS animations triggered by hovering over the wrong element? - css

Question

On hovering on a single element, I'd like for the photo to disappear and the text to appear, along with the box-shadow animation, which I've achieved.
The problem is, when I hover back and forth on either of the first two elements in the top row, the animations for the bottom row elements are triggered and the whole menu gets the jitters!
You'll probably have to view the snippet in full page to see.
Any solutions?
/* ----------------------------------------------
* Generated by Animista on 2018-8-7 19:10:49
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shadow-pop-br
* ----------------------------------------
*/
.shadow-pop-br {
-webkit-animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
#-webkit-keyframes shadow-pop-br {
0% {
box-shadow: 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
box-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red, 6px 6px red, 3px 3px red, 8px 8px red;
-webkit-transform: translateX(-8px) translateY(-8px);
transform: translateX(-8px) translateY(-8px);
}
}
h1 {
font-family: Lato;
font-weight: bold;
font-size: 48px;
text-align: center;
margin: auto;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px;
max-width: 960px;
margin: 0px auto;
}
.container:hover {
display: flex;
}
.overlay-title {
color: black;
opacity: 0;
font-size: 30px;
font-family: Lato;
font-weight: bold;
position: absolute;
width: 75%;
top: 38%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-description {
color: black;
opacity: 0;
font-size: 20px;
font-family: Lato;
position: absolute;
width: 75%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.card1 {
position: relative;
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
background-position: center;
background-size: 250px;
background-repeat: no-repeat;
}
.card-img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 178px;
}
.card1:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card1:hover .overlay-title {
opacity: 1;
}
.card1:hover .overlay-description {
opacity: 1;
}
.card2 {
position: relative;
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
;
background-position: center;
background-size: 250px;
background-repeat: no-repeat;
margin-left: 30px;
margin-right: 30px;
}
.card2:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card2:hover .overlay-title {
opacity: 1;
}
.card2:hover .overlay-description {
opacity: 1;
}
.card3 {
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
background-position: center;
background-size: 100px;
background-repeat: no-repeat;
}
.card3:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card3:hover .overlay-title {
opacity: 1;
}
.card3:hover .overlay-description {
opacity: 1;
}
.card4 {
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
;
background-position: center;
background-repeat: no-repeat;
background-size: 200px;
margin-right: 15px;
}
.card4:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card4:hover .overlay-title {
opacity: 1;
}
.card4:hover .overlay-description {
opacity: 1;
}
.card5 {
display: flex;
height: 300px;
width: 275px;
border-radius: 3px;
background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
;
background-position: center;
background-size: 250px;
background-repeat: no-repeat;
margin-left: 15px;
}
.card5:hover {
animation: shadow-pop-br;
animation-duration: .3s;
animation-fill-mode: forwards;
background-image: none;
}
.card5:hover .overlay-title {
opacity: 1;
}
.card5:hover .overlay-description {
opacity: 1;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portfolio Animations</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="sickmoves.css">
</head>
<body>
<h1>Recent Projects</h1>
<div class="container">
<a href="" class="card1">
<section class="overlay"></section>
<div class="overlay-title">Vroozi</div>
<div class="overlay-description">Landing Page Redesign</div>
</a>
<a href="" class="card2">
<section class="overlay"></section>
<div class="overlay-title">dailyplanet.info</div>
<div class="overlay-description">Responsive Design</div>
</a>
<a href="" class="card3">
<section class="overlay"></section>
<div class="overlay-title">ToiLit</div>
<div class="overlay-description">Native App Design</div>
</a>
<a href="" class="card4">
<section class="overlay"></section>
<div class="overlay-title">Yelp</div>
<div class="overlay-description">Feature Integration</div>
</a>
<a href="" class="card5">
<section class="overlay"></section>
<div class="overlay-title">Kura Sushi</div>
<div class="overlay-description">User Research</div>
</a>
</div>
<script src="" async defer></script>
</body>
</html>

Answer 1

Use this in your code:
.container > a { position:relative; }
You are not using this on all 'a' tag that's why it is happening.