Max Max - 1 year ago 106
CSS Question

CSS :after to fade transition on hover

I am using

to create a hover over design (long story, in WP with VC) and am not trying to get the
CSS to fade in when someone hovers over the initial div.

Here is a fiddle - click here

Below is my approach:

.border-home:hover:after {
position: absolute;
top: 0%;
left: 0;
right: 0;
bottom: 0;
background: url( 50% 50% no-repeat;
background-size: 190px 50px;
content: '';
cursor: pointer;
background-color: rgba(127, 165, 61, 0.9);

I am struggling to make the green background and read more button fade in smoothly.

How can I achieve that?

Answer Source

Just add

.border-home::after {
    transition: opacity 0.4s ease;
    opacity: 0;

.border-home:hover::after {
    opacity: 1;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download