Homepage Layout with CSS3 Hover Effects - 8 Variations

[picaflor-azul]

Hello ;-)

This module will give you a home page layout like shown in the demo. There are 8 variations of hover effects, all done with CSS3 transitions. Please note that you will only see the cool transitions effects in modern browser that support the CSS3 properties used.



Live Demo Showing 8 Variations


Installed on a Live Zen Cart

Features:

• Customizable--add your images, text, titles, button text, and links

• Choose from 8 hover effects

• Neutral styles included

• Easily customizable

• W3C Valid XHTML and CSS3

• Cross Browser Compatible with modern browsers that support CSS3 properties. Older browsers will not show the CSS3 hover effects

• No changes to core files

• Easy Installation

• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

• Fully compatible with versions 1.3.8x, 1.3.9x, 1.5x. Would probably work with lower versions although it has not been tested.

Please post any bugs or questions here.

Thanks,

Anne

[picandnix]

Anne strikes again. Your mods just keep getting better and better!

[picaflor-azul]

Anne strikes again. Your mods just keep getting better and better!

Thanks! I am happy that you like them.

Thanks,

Anne

[jlizotte]

Anne,
I've successfully installed this on my testbed along with your css3_breadcrumbs. I've chosen style number 3 for the hover effects. The lower right picture (7.jpg) is in constant "hover mode", never showing just the orginial image, but instead using the overlay text, title, button, etc. I've re-uploaded the css for this, with no change.

Any idea what I should be looking at?

Thanks in advance.

PS. Running 1.5.1, Abbington Mega. And yes, I did disable the orginal slideshow from define main page. Maybe I need to delete the js for it? And yes, I also merged the 2 tpl_main_pages.

[picaflor-azul]

Anne,
I've successfully installed this on my testbed along with your css3_breadcrumbs. I've chosen style number 3 for the hover effects. The lower right picture (7.jpg) is in constant "hover mode", never showing just the orginial image, but instead using the overlay text, title, button, etc. I've re-uploaded the css for this, with no change.

Any idea what I should be looking at?

Thanks in advance.

PS. Running 1.5.1, Abbington Mega. And yes, I did disable the orginal slideshow from define main page. Maybe I need to delete the js for it? And yes, I also merged the 2 tpl_main_pages.

If you post a link to your site I can take a look.

Thanks,

Anne

[jlizotte]

I can't post a link, it's on my testbed, but here is a screen shot:

It's the bottom picture in this image. It always looks like you are hovering over it...button, text, etc. It never shows just the original image as it should without being hovered on.

[jlizotte]

OK, here's what I tried so far:
1. re-uploaded all files - no change
2. disabled js from original slideshow on abbington mega - no change
3. disabled css3 breadcrumbs and used the default tpl_main_page from this (hover) plugin - no change
4. changed my hover style on this plugin from style 3 to style 1 -it worked.

So apparently the problem is somewhere in the files or css for style number 3, however, looking at it, it's beyond my abilities to see where the problem may be. I'll use a different hover style for now, but if you have any ideas on what I should look for in style number 3, I'd really like to use that going forward.

Thanks for your time, Anne. I hope you had a great holiday!

[picaflor-azul]

OK, here's what I tried so far:
1. re-uploaded all files - no change
2. disabled js from original slideshow on abbington mega - no change
3. disabled css3 breadcrumbs and used the default tpl_main_page from this (hover) plugin - no change
4. changed my hover style on this plugin from style 3 to style 1 -it worked.

So apparently the problem is somewhere in the files or css for style number 3, however, looking at it, it's beyond my abilities to see where the problem may be. I'll use a different hover style for now, but if you have any ideas on what I should look for in style number 3, I'd really like to use that going forward.

Thanks for your time, Anne. I hope you had a great holiday!

I'll take a look and if there is a mistake in the package I'll post a fix to the thread ;-)

Thanks,

Anne

[mona98]

Hello,
I am new to zencart and I have noticed that Anne creations are pretty awesome!
I have installed the Homepage Layout with CSS3 Hover Effects - 8 Variations and it works great. However I am having a problem as it appears that my original index page appears below the new page (homepage layout hover effects). I am wishing to remove the original index and just use the homepage layout but have no idea how to do this.

Can someone please help me with this? It would be greatly appreciated.
I have uploaded a screenshot.

Thanks in advance.

[jlizotte]

In my template (Abbington Mega), I had to empty the text from my define main page. I'm not sure if your problem is the same, but you may want to check in your define pages editor that the main page is completely blank, no returns, spaces, etc.