How can I apply a transition to a div:hover::after element?

https://jsfiddle.net/gta9vbe3/1/

I’m making a connect four game and right now I’ve created a shading effect that darkens the whole column on the board when you hover over it.

I want to add a transition to make it fade away smoothly, I’ve added a transition: all .5s ease; property to the div that this div:hover::after rests on but it didn’t work?

Is this still the same game I answered a detailed question to nearly a year ago ?

(And to which you never replied BTW :slight_smile:)

You need to add the transition to the element in question which is your :after element. However it needs to be in place to start with and then you change something on hover otherwise there is no transition.

i.e.

.cell::after {
    content: "";
    display: block;
    background:transparent;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -999em;
    top: -999em;
    z-index: 1;
    transition:background .5s ease;
}
.cell:hover::after {
    background: #081d96;
}

As you never replied to my last answer and because I didn’t want good code to go to waste I went on and built the full working game. :slight_smile:

4 Likes

Hey Paul! Sorry for the no reply, lol. This is the same game. I was trying to rebuild it from memory to see if I could do it without any help. I guess this is as far as I could get. Although, I will pat myself on the back for getting this far on my own. Anyway, glad to see your still here helping me out :).

On a separate note I quit my job to focus more on programming. I’ve been trying to be a front end dev for about 3 years now and I’ve still haven’t gotten a job. I’d like to think its because I don’t have a lot of good projects in my portfolio. Is there anything you would recommend that would greatly improve my skills?

Thanks.

HI,

No worries :slight_smile:

I would suggest you make a separate post in the appropriate forum topic about work and what approaches would be best to market yourself. I’m retired now and don’t really have much information as I more or less fell into working for web design by accident. It was a hobby that I became good at and people just kept asking me to work for them and lasted about 20 years :slight_smile:

You really need advice from those out in the workplace now so start a new thread and hopefully you will get better answers than mine. :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.