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.
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.
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.
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
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:
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
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?