CSS :after transition (on hover)

Question

I am using :after to create a hover over design (long story, in WP with VC) and am not trying to get the :after 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(http://i.imgur.com/3Si5tIy.png) 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 1

Just add

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

.border-home:hover::after {
    opacity: 1;
}