Max Max - 15 days ago 7
CSS Question

CSS :after transition (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

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

Just add

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

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