• 0

Problems implementing CSS & JS to create hover overlay

Question

Posted · Report post

Hi there,

 

I'm using the Pagelines framework on a website that I'm building and I'm having problems trying to create a hover overlay over a grid of images.

 

This is what I am trying to achieve:

 

http://callmenick.com/tutorial-demos/image-overlay-hover-effects/

 

The instructions to implement this is here:

 

http://callmenick.com/2014/03/06/image-overlay-hover-effects-with-css3-transitions/

 

I want to feature a grid of 16 images (4x4) on the page, have this effect when you hover and then link each image to relevant page content when you click through.

 

So far, I have added the CSS and saved and uploaded a JS file via FTP. Since I only want this to feature on one page, I tried inserting a link to the JS in the page content. I have created a layout using the grid system and just need a few pointers on how to implement the code into my layout to get it to work correctly. 

 

Heres a link to the pageā€¦ http://tinyurl.com/n73so3q

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

I wouldnt have the js like that in the framework folder, if you update framework later you will lose your js file.

 

Its only 29 lines why not just add the script inline?

 

Also all the $'s will need to be replaced with jQuery like this:

jQuery(this).closest(".img").removeClass("hover");

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Simon, thanks for coming back on this.

 

So to be clear, you would place the JS inline above my page content? I see what you mean about keeping it in the framework folder regards update - hadn't thought of that :)  

 

Regards adding the mark-up to my layout - thats where I'm struggling to implement it correctly. The layout is styled with the Grid System and I'm looking for an example for how to deconstruct the instructions and make it work for this page.

 

Grateful for any feedback.

 

Thanks

 

James

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well in regards to the JS, you have 3 options.

 

1. Use PHP to only add the js to that page.

2. Put the script inline into your content.

3. Add the js to you header scripts area, but add some logic to the js so it only runs on that page.

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'll try it inline initially and see how that goes.

 

Still stumped with the mark-up

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

For the mark-up this is what i've tried unsuccessfully...
 
<div class="span3"><div id="effect-1" class="effects clearfix">
    <div class="img">**MY IMAGE AND HYPERLINK HERE</a><div class="overlay">
            <a href="#" class="expand">+</a>
            <a class="close-overlay hidden">x</a></div>
<div class="span3"></div>
 
Tried previewing in several browsers to see if thats what is causing the issue and it doesn't work in any...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now