Animations not running on hover w/ visibility

Background Information:

My pen --> https://codepen.io/Mike-was-here123/pen/zMWrwx

Now everything starts on line 237 CSS, 99 HTML.

I put boundary lines in their to help narrow down where the issue is. Basically it is with the project cards in my ‘My projects’ section (the are outlined in red).

Only focus on the first one. It has the placeholder background to it.

  • .project-card is the main card box that holds everything.
  • .project-desc has a visibility: none; property so you cant see it. Here is what it looks like:


My problem:

I am having a issue with my animations just not running when i hover over my set object. I have a feeling visibility might be the issue, but i don’t know how.

On CSS line 259 i have a animation that should run when i hover over the description div, which is 100% width and height of the project card itself (CSS line 238).

In that animation on CSS line 215 i change the visibility and opacity. Opacity makes it so it fades in but visibility allows it to be seen on the html (but it is still physical present unlike display: none)

On 264 i have a animation that animates the scale and box shadow.

  • Is the .product-card animation not running because the desc is covering it?
  • Could i fix it with display: none;?
  • Even then, the desc animation should at least run.

I tried something like that:

.project-card:hover .project-desc {
  visibility:visible;
  animation-name: appearProjectDesc;
  animation-duration: 0.5s;
  cursor: pointer;
}

You have to use visibility:visible; if not, the element will keep the visible:hidden; property.
If someone can explain why .project-card:hover .project-desc works ?
I think it’s because .project-card is a child of .project-desc, but I’m not sure.

1 Like

That animations work now, but how do i keep the styled affect as long as they are hovering over the card?

Why isn’t my project-card animation working?

.project-desc:hover .project-card {
  animation-name: transformCard;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
}

I tried swapping .project-desc for .project-card and still didn’t work.

I think it’s because you put visibility:visible; ont the appearProjectDesc keyframe.
Move it to .project-desc:hover .project-card and it will work fine :slight_smile:

@keyframes appearProjectDesc {
  1% {
  opacity: 0.1;
  }
  100% {
    opacity: 0.9;
  }
}
.project-card:hover .project-desc {
  animation-name: appearProjectDesc;
  animation-duration: 0.7s;
  animation-fill-mode: forwards; /* Isn't Working? */
  animation-timing-function: ease-in-out;
  visibility:visible;
  cursor: pointer;
}
1 Like

Another possibility for this type of effect, maybe more relevant is to use the transition property.
You delete the keyframe and do something like that:

.project-desc {
  visibility:hidden;
  padding: 5%;
  background-color: black;
  color: white;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition:400ms ease-in-out;
}
.project-card:hover .project-desc {
  opacity:0.9;
  visibility:visible;
  cursor: pointer;
}

You can find more info here! :slight_smile:

1 Like

Thanks, this animation style works so much better. I have one last question, why doesn’t my .project-card animation work?

.project-card:hover .project-card {
  box-shadow: 2px 2px 5px black;
  transform: scale(1.05);
}
.project-card {
  transition: 1s ease-in-out;
  transform: scale(1);
}

In that case, you don’t need to add .project-card after the :hover:

.project-card {
  border: 1px solid red;
  margin: 2% auto 2% auto;
  width: 100vw;
  height: 100vh;
  max-width: 300px;
  max-height:300px;
  box-shadow: 0px 0px 0px black;
  background-size: 100% 100%;
  transition: 1s ease-in-out;
  transform: scale(1);
}
.project-card:hover { 
  box-shadow: 2px 2px 5px black;
  transform: scale(1.05);
  z-index:1;
}

As you can see I added the z-index property to allow the block to jump over the others when the scale goes into action. Try to remove it to see what happen :wink:

1 Like

Okay i have on final question. this one came out of nowhere.

So i am adding a view project button to my hover over popup.

Here is the code:

.view-project-button {
  border-radius: 5px;
  color: white;
  border: 2px solid white;
  width: relative;
  height: 40px;
  padding: 7px;
  margin: 0 auto;
  transition: background-color 0.5s ease;
/*   transition: color 0.5s ease;  For some reason this doesn't work and breaks everything else */
}
.view-project-button:hover {
  background-color: white;
  color: black; /* doesn't work */
}

As you can see, the animations for everything expect the font color changer. When you hover over the button, a animation should change the background color to white and color to black (text color). Only the background color works, and when i add in the color one the background one doesn’t work.

Even then the text should at least change without the animation?

<div class="project-card placeholder">
      <div class="project-desc">
        <p>Flexbox Technical Documentation Page</p>
        <a class="view-project-button"> View this Project </a>
      </div>
    </div>

You have a specificity issue on your button’s color property

The 1st and 2nd style has priority over the ones in .view-project-button:hover.

2 Likes