0

This is probably something really, really stupid that I have missed but my CSS animations aren't working as expected. Instead of the elements fading out and in respectively, I just get a quick, nasty change between them.

Apologies in advance as my classes may be confusing at first. before is the class content I want to show BEFORE hover. after is the class of content which should show AFTER (or during) hover.

There should be a css opacity animation which makes all BEFORE content fade out and all AFTER content fade in but I can't get it to work.

I have referenced the following sites and SO articles before posting:

CSS (SCSS):

.homepage-services-hover {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: auto;

        .before {
            position: relative;
            top: 0;
            left: 0;
            visibility: visible;
            opacity: 1;
        }

        .after {
            position: absolute;
            top: 0;
            left: 0;
            visibility: visible;
            opacity: 0;
        }

        &:hover {
            .before {
                opacity: 0;
                transition: opacity .5s;
                -moz-transition: opacity .5s;
                -webkit-transition: opacity .5s;

                position: absolute;
                top: 0;
                left: 0;
                visibility: visible;
            }
            .after {

                opacity: 1;
                transition: opacity .5s;
                -moz-transition: opacity .5s;
                -webkit-transition: opacity .5s;

                position: relative;
                top: 0;
                left: 0;
                visibility: visible;
            }
        }
}

HTML:

<span class="homepage-services-hover" style="width: 175px; text-align: center;">

    <a href="#">

        <img class="before" src="https://placehold.it/150x150" alt="IMAGE" />

        <span class="before">

            <h5>Title</h5>

            <P>
            Excerpt
            </P>

        </span>


    </a>

    <img class="after" src="https://placehold.it/175x175" alt="IMAGE"/>

    <a class="button after" href="#">TITLE</a>

</span>

All the dev is done on a local server so I can't post a live link.

I weren't aware that JSFiddle supported SASS so here is a Fiddle.

Community
  • 1
  • 1
E.Owen
  • 753
  • 1
  • 10
  • 25

2 Answers2

2

There should be a css opacity animation which makes all BEFORE content fade out and all AFTER content fade in but I can't get it to work.

As you have correctly identified, you just need to set the initial opacity on all elements and then apply an opacity transition to the same elements:

div {
display: inline-block;
vertical-align: top;
width: 200px;
height: 200px;
transition: opacity 1.5s ease-out;
}

div p {
color: rgb(255,255,255);
font-weight: bold;
font-size: 24px;
text-align: center;
}

div:nth-of-type(1) {
background-color: rgb(255,0,0);
opacity: 1;
}

div:nth-of-type(2) {
background-color: rgb(0,0,255);
opacity: 0;
}

div:nth-of-type(1):hover {
opacity: 0;
}

div:nth-of-type(1):hover + div:nth-of-type(2) {
opacity: 1;
}
<div>
<p>Hover Me</p>
</div>

<div>
</div>
Rounin
  • 27,134
  • 9
  • 83
  • 108
0

Your transition sould not be in the hover css but on the basic css of classe so just change your css to that : 

.homepage-services-hover {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;

    .before {
        position: relative;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;

        transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
    }

    .after {
        position: absolute;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 0;

        transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
    }

    &:hover {
        .before {
            opacity: 0;

            position: absolute;
            top: 0;
            left: 0;
            visibility: visible;
        }
        .after {

            opacity: 1;

            position: relative;
            top: 0;
            left: 0;
            visibility: visible;
        }
    }
}

And job should be done ;)

Hope I help !

ekans
  • 1,662
  • 14
  • 25
  • I have tried this but it doesn't work. I've posted a fiddle in my comment on the OP. Maybe this well help troubleshooting? Here is the fiddle: https://jsfiddle.net/cLvhbjm1/1/ – E.Owen Dec 05 '16 at 14:16