@maxframefelix – The earlier reply which you said didn’t work has been removed as spam. I also removed your “doesn’t work” reply since it no longer made sense on its own. You’re not in any sort of trouble, only the spammer is. The solution was generated by chatGPT (an AI app). Such solutions are on occasion correct but are often flawed.
It was correct in that you need to separate the red dot from the rest of the logo. It can be relative positioned where desired with CSS directives like top: and right:. You can then animate the red dot to blink on hover. The red dot needn’t be another image, it can be its own div with a radius border. Setting the radius to half the overall size will result in a circle.
Here’s a codepen example of a single blink on hover. Not exactly what you want, but you can adapt it to better suit your need.
Hi @bcworkz – thank you for your answer. Unfortunately nothing happens, when insert both of these codes. Do younknow what might causing this?
At least you got the blink animation working 🙂
Apparently we cannot add :hover to a pseudo element like :after. I think the dot needs to be an actual div or span element, it cannot be an :after element to get a hover effect.
It’s not my decision to make, but if you’re going to have a video background under the logo, I would at least give the white letters a dark drop shadow so they read against light backgrounds. It’d have to be part of the image, it cannot be done with CSS.
