Website help! (please)

+2 Luis Hiraldo · December 24, 2014
I am new at coding!
I'm trying to do a post thing but can't seem to figure it out!

So, it's a picture with a label on the bottom

And when you hover over it a description slides up, like in the next picture!


Post a Reply


Oldest  Newest  Rating
+1 Mitch Mullvain · December 27, 2014
Hey there,

You should probably check out jQuery for that. It's a simple javacript language designed for simple animation such as that.

I will admit that when it comes to javascript I'm not that great myself, but I do know that you would need to use a mouseover scroll up function. Check out the jQuery tutorials on here. It's pretty easy to learn I know that.
0 Predrag Kostic · December 28, 2014
Exactly as Mitch has explained, the easiest way is to use jQuery's mouseover function. You can learn jQuery here or over at
0 Predrag Kostic · December 28, 2014
wheatley, that specific wouldn't work on a picture that is not at the very bottom of the page?

I think he could use only pure CSS to accomplish what he wants but it'd be way messier than using jQuery.
0 Predrag Kostic · December 28, 2014
OP wants the picture description to slide up when you hover over a picture, unless he tweaks the code you gave as example he won't be able to achieve that.
As OP has stated, he's new to coding so I don't see that happening.
It'd be much easier to learn jQuery than to delve into the "CSS purists" way of doing things.
IMO CSS animation looks so much more confusing than JavaScript, but then again if someone prefers CSS over jQuery that's their choice.
+2 Mitch Mullvain · December 29, 2014
While Wheately core is correct, it is possible in CSS (because I've done similar things in CSS) CSS doesn't render well for everyone. It depends on the browser and the speed of a person's computer. 

jQuery is faster, but it is a new language to understand and for some might take time, where CSS is a hell of a lot easier to learn and know, but it is not reliable. Examples of things that can be done for both but are far more reliable in jQuery are:
     - Tool Tips (These worked once for me in CSS, and then wouldn't work again unless the page reloaded)
     - Drop Down Menus (These work fine in CSS, but can be a bit buggy at times)

Personally I think CSS should be for styling and jQuery should be for animation/transition (like HTML is for structure and PHP is for dynamic use). Again it is up to you, I don't want to cause conflict over the matter, but I do want to state what is out there and what my opinion is. 
0 Predrag Kostic · December 29, 2014
Wheately, while I agree with you on a certain point, you're wrong when you say jQuery is not made for animations, because it is:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

I put to value all the awesome parts, jQuery is basically awesome. But it all comes down to choice, so CSS or jQuery that's your answer Luis
0 Predrag Kostic · December 29, 2014
Nobody here cares about the best performing choice, OP is simply wanting a simple way for a simple task, he's not making a movie (I guess).
You shouldn't use such exaggerated adjectives, jQuery is in no way terrible, sure it may be less performant(not a real word) than CSS but it will have no problem animating a web page.
Because it's easy is exactly why he should use it in my opinion.

By the way that looks like a blog post created to promote VelocityJS, whether it is or not I don't know though? But it's funny.
0 Predrag Kostic · December 29, 2014
To be honest I don't know the right way to do things is, only the easiest. In the future I shall suggest both: The easiest way to do it IMO is to use jQuery and the right way to do it is using CSS transitions, or is it.. that blog post mentioned something even more performant.
0 Luis Hiraldo · December 30, 2014
Wheately Core thanks, I tweaked a little the code for what I wanted to do and worked perfectly.

And also I'll check out on jquery!
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.