Not new to CoffeeCup, but am a newer member of the forums. And a little rusty on my HTML CSS skills. Not even sure what this effect is called, so I couldn't figure out how to search to see if there was a previous post on this or not.

The effect is where you hover over a photo, and then a text box drops down below the photo so it can be read and give more info. You can see an example on this website here . . .

http://stectech.com/

It has the effect near the middle of the page, where there are 4 photos of people (The Team).

My question is, where can I learn how to do that effect? And is it very difficult to do?

Thanks! Mike B.

Eric is the guru. Search his site for all kinds of things to do! Check this out... http://progrower.coffeecup.com/picsmouseover.html

Go to the home page if that is not exactly what you are looking for. He has more effects. Good thing about his site is that he gives you the demo, and the code to make it work. Drop him a message here in the forums if you need more help.

Short answer was that it shouldn't be to hard! Welcome to the forums!

I think JQuery would be the way to go but there are several example of pure css doing this.
Try this one.
http://www.hongkiat.com/blog/css3-image-captions/

Hey Gunsmoke, thanks! I'm checking through Eric's site. A lot of interesting items on there!

Eric, thanks for the pure CSS examples. Those are pretty cool. I'll also see what I can find on the JQuery methods. A couple weeks ago, I didn't even know what JQuery was! I learned some about it while testing out some sliders and such. It's amazing what JQuery can do.

Thanks guys!

Mike B.

See following links for figcaption effects (fig = figure / image tag in HTML5 and caption = a title or brief explanation accompanying an illustration)

http://www.overpie.com/jquery/articles/ … ut-effects

http://tympanus.net/Tutorials/CaptionHo … ndex7.html

Thanks Mansour. Some very nice effects!

Mike B.

Figcaption explained well here
http://www.youtube.com/watch?v=z-naBVXTi6g

There are many way to do that for effects with or without JavaScript
Then you can use hover effect to hide and show with java script
you can do with Z-index or css mouse hover effect without js

Cross browser animated captions using HTML5 figcaption and jQuery - See more at: http://www.coalmarch.com/blog/cross-bro … figcaption

And with CSS animations-and-transitions without jQuery
You can do something in this fashion watch the video http://www.youtube.com/watch?v=W3eJWpvIl0g then instead rotate
you use hover pseudo classes to hide and show elements and css transform and transition effects.

and have a look at possibilities at following link
http://tympanus.net/codrops/2013/05/22/ … ansitions/

Thanks again Mansour! Those will be really interesting to try out. A couple of them look like they are exactly what I'm looking for. Got em' bookmarked. Awesome.

Mike B.