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

[sethrpabst]

Edit fiddle - JSFiddle - Code Playground

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?

[PaulOB]

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

How can I use z-index to simulate a chip dropping through a connect four board to give it a 3d effect?

Hey friends I’m making a connect four game and right now I can drop a the chip in it’s appropriate slot as well as change from a red chip to a yellow chip. However when you drop the chip it does not go into the board. It is layered outside of the board. I would like the chip thst’s being dropped to fall over the dark blue circle within each slot and fall under the slot itself. So it would look realistic and 3d. I thought I would be able to do this with z-index, but I have 2 problems. 1st When I …

(And to which you never replied BTW )

@sethrpabst

I want to add a transition to make it fade away smoothly,

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.

[sethrpabst]

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.

[PaulOB]

HI,

No worries

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

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.