Max Max - 8 months ago 53
CSS Question

Trying to get :after to fade in on hover

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

Css for :after is below:

.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. If anyone could help that'd be great!

Answer Source

Just add

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

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