Jump to content

Archived

This topic is now archived and is closed to further replies.

create

Problems implementing CSS & JS to create hover overlay

Recommended Posts

create    0
create

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
Simon    247
Simon

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
create    0
create

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
Simon    247
Simon

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
create    0
create

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
create    0
create
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

×