Ismael,

Ok, I followed all of your suggestions and the speed is great. I do need the transitions to go slower, but overall much much better.

I’m having a similar problem that I have had with other sliders. The layers that I have that look great on my desktop are misplaced on my ipad. ie. the words are moved to off the screen. Any suggestions? Thanks so much for giving me the other suggestion about changing the effects. :)

-LW

Hi David,

Thank you for your reply. Like I said in my first message, I already fixed the padding-top issue thanks to Gingerstu (see link in my first message). About that, I wouldn’t recommend the fix you provide, since it will affect all pages and mess up the header everywhere else (for people using a sticky header at least).

For my second issue, I am really sorry but I don’t understand how changing the height of a full screen (hence 100% height) slider would solve the problem. Anyway, it’s not a big deal and I can use the workaround (adding extra color sections to manually force a full-screen result) that I was using before the “minimum 100% of the browser height” feature was added to color sections.

Still, I kind of have the feeling that this “Ghost Header” is a collateral damage due to the new (and great !) “fade-in sticky header” that is not “compatible” with the Blank Template (no header). If that’s really the case, I thought it would be a good idea to notify the team for the next update. ;)

Thank you for your time,

Fred

• This reply was modified 12 years ago by FLQA.

After many hours I finally came across something which works! I have one image which is a photo, and another image which is a photo with an overlay with some text. When hovering over the image, it switches to the other one.

I have added some text with the code for the image, and changed the js file by adding some code (below).

https://kriesi.at/support/topic/custom-css-hover-on-alb-image-element/

Does anybody know a way I could add to this code a slow fade in / out between images?

    $(function() {
    $('img[data-hover]').hover(function() {
        $(this)
            .attr('tmp', $(this).attr('src'))
            .attr('src', $(this).attr('data-hover'))
            .attr('data-hover', $(this).attr('tmp'))            
            .removeAttr('tmp');
    }).each(function() {
        $('<img />').attr('src', $(this).attr('data-hover'))
    });;
    });

Hi Ismael,
I have had to completely redo the homepage layer slider. Same link as above.
The text is now superimposed on a white background however I was wondering if it’s possible to move the image lower so as the text is not superimposed at all on a background image? Or to move the text higher.
Basically I would like the text to be on a completely white background and for my images to display at 100% (So nothing gets cut off from the top of the image)

Thank you for checking. Well I am stumped. What I see in my browser window is the top 3/4 of the logo element appears blank or blocked out, only lower quarter of logos are visible. When I do a screen grab, the image shows full logo view. When I resize the browser to simulate 8 inch tablet the logos appear and when I stretch the image out the disappear at about 10 inches. Must be my browser.

Hi– The view that you show is in chrome on a laptop/desktop. In FF, the bottom of the orange box is right on the white line. In Chrome, the bottom of the orange box is 16 pixels off. I just need to know what css to add to make the bottom of that orange box sit on the bottom line in both browsers. My client wants the box sitting on the bottom line in both browsers, but the css I add seems to not be working.

Also- in chrome on the ipad, the footer text why vosburgh, success stories, and home search are moved to two lines. How do I set the margins on these words to ensure that smaller screen sizes see them as I would like?

Thanks for you time and help. :) This is the very last step in this project, so we’re anxious to wrap it up. :)
Angie