Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

Help with Jquery img overlay content.

Hi guys,

I have recently given my portfolio website a re-vamp and would like to add the 'advanced slide effect' to the portfolio images. The effect can be found here: http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo3

I have tried installing it and had no joy! Could anyone help with this and maybe edit my pen.

http://codepen.io/sdk_19/pen/PqxZGy

Thanks in advance!

3 Answers

MIke Allen
MIke Allen
9,727 Points
MIke Allen
MIke Allen
9,727 Points

Hi Shaun,

I got this to work on Codepen with a little bit of tweaking. Firstly I noticed you haven't linked to the jQuery library within the JS section on codepen. So that was my first step.

Secondly i copied in the entire plugin .js file into the js section.

I then copied in the variation of the slider you wanted at the bottom and changed the id selector to d1 (as thats what the html code he gives you at the start has.

Finally I copied in the HTML (just below your name) and the css and all worked fine.

Obviously it looks horrible as its not linking directly to images but the rollover state is functioning.

http://codepen.io/AceAllen/pen/GJwqxv

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

Hi mike,

Thanks. That didn't really help though! Im trying to place the overlay on the images for my portfolio for example the vikki holloway website image

MIke Allen
MIke Allen
9,727 Points
MIke Allen
MIke Allen
9,727 Points

Hi Shaun,

Apologies, I didn't try using it with the portfolio section. I took it from your post that you just couldn't get it to function.

After playing around with it, the problem seems to come from the <a href=""> before the rest of the content. For some reason when you apply the <a> tag before the img it wont view that as a slide. Even adding an a tag around the content of the slide causes it to stop hiding the content. The a that will work is one used within the content itself (like the button they supply type they supply).

If you require it to have an <a> around the entire slide then perhaps write some jQuery which adds the link in afterwards though that might cause it to fallover as well.

Hope that helps a little bit more.