将鼠标悬停在图上并更改无花果标题吗？

Question

I'm following this tutorial: http://tympanus.net/codrops/2013/06/18/caption-hover-effects/ . Going in it step by step so I know what i'm doing. I was surprised to learn this effect is done all in css.

Anyway I got stuck at this part in cs-style3

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.4s, opacity 0.1s;
}

What is .cs-hover? I search for this is this some kind of special css3 thing? Because it isnt' a class in the file. And I can't get this to work.

I'm trying to hover over the figure/img and the figcaption is suppose to slide up.

I was thinking of trying figure:hover figcaption{} but this doesn't work either

Answer 1

On the demo page there are a lot of examples. The author used the .cs-style-"number" class to differentiate bewteen the different styles.

This means you should add the class to your code as well, just like in the inspector in the image above. I hope this helps you, otherwise leave a comment and we'll see if we can help you further

Answer 2

If you go through the code you'll see that they include <script src="js/toucheffects.js"></script> . This script says:

// for touch devices: add class cs-hover to the figures when touching the items