# Looking for stack for rollover effect for image to change to another image **URL:** \ **Category:** RapidWeaver Classic\ **Created:** [March 17, 2016, 3:22pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894 "2016-03-17T15:22:33Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 17, 2016, 3:22pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/1 "2016-03-17T15:22:33Z")
Happy St. Patrick’s Day! I am wanting to create an effect where the viewer can hover over a button and see a before and after of the image. Specifically I want to show a person before they exercised and then the after pic. I’d also like to include a Topbox lightbox which provides a testimonial. Currently I’ve got the Topbox working no problem. But the trigger is a static photo of the before pic and the lightbox is the after pic along with a testimonial from the client. I’d like to have the initial trigger be able to rollover when hovered over between the before and after. Sort of a quick look if that makes sense. Thanks, PJ ---
**Author:** ![jabostick](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jabostick/32/1760_2.png) [@jabostick](https://forums.realmacsoftware.com/u/jabostick)\ **Post date:** [March 17, 2016, 4:24pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/2 "2016-03-17T16:24:04Z")
There are a couple of stacks that let you slide over an image and show the before and after. One by Doobox: [http://rapidweavercommunity.com/rapidweaver/addons/stacks/compare](http://rapidweavercommunity.com/rapidweaver/addons/stacks/compare) and one by WIll Woodgate: [https://stacks4stacks.com/imagecompare/](https://stacks4stacks.com/imagecompare/) They arent doing exactly as you describe, but they’re a pretty nifty little design. You could add the testimonial below the image. I’m sure there are others that would do what you’re asking but I like these two as a clever way to compare images. ---
**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\ **Post date:** [March 17, 2016, 4:43pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/3 "2016-03-17T16:43:44Z")
There’s also HoverBox that will let you mouseover and toggle between a static and hovered image: [https://stacks4stacks.com/hoverbox/](https://stacks4stacks.com/hoverbox/) HoverBox can be set as a trigger for a TopBox. Some consideration has to be made towards the handling of hover effects on touch devices (devices that lack conventional mouse input). The latest version of HoverBox lets you choose in the settings how to handle the effect on touch devices - like permanently displaying the hovered or static image. There’s a free demo version provided for download, so feel free to experiment with it and see if it comes close towards what you want to achieve. ---
**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\ **Post date:** [March 17, 2016, 6:09pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/4 "2016-03-17T18:09:46Z")
HoverBox is the only one you will need. Super easy to use and well laid out so you can what is going on edit mode. ---
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 17, 2016, 8:29pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/5 "2016-03-17T20:29:27Z")
Cheers! Love this forum! ---
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 17, 2016, 9:03pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/6 "2016-03-17T21:03:39Z")
@willwood Hoverbox is perfect. Trying to figure out how to get it to trigger the top box content. This is how I set up so far, as it looked logical to me. But it isn’t working. Can you figure out what I did wrong? Doing it like this also kills the hover effect as well. ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/6/650f595eeb7c5264416589ccca730434757eb185.png) ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/e/efc01881cbcd15471f44b7dc64c162bf107f043e.png) ---
**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\ **Post date:** [March 17, 2016, 9:37pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/7 "2016-03-17T21:37:46Z")
You’ll need to configure this as a custom TopBox trigger, otherwise the two hover / click events will be conflicting with each other. ---
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 17, 2016, 10:55pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/8 "2016-03-17T22:55:30Z")
Umm… Ok. Thanks. Hopefully your website explains that. ---
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 18, 2016, 2:15am UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/9 "2016-03-18T02:15:29Z")
@willwood I’m terribly sorry but I just don’t understand what you mean exactly. I watched your video and read your webpage, but I still am confused and I’m sure it’s because I’m new to this Weaver world… Should I keep the hover stack of the two photos in the Topbox trigger area? This makes logical sense to me. If that’s true then I need to go to the settings area for Topbox and select “custom trigger” which means I then go to the Advanced area “custom trigger:” and name this, in this case I chose .gail. When I do this the hover stack disappears and your preset text appears in the TopBox Trigger section letting me know that “This TopBox can be triggered using a custom ID…” Since the Hover stack contains images I will logically assume that per your website instructions I need to add the code identified as “Custom Trigger… or an image” But I have no idea where to put this code. I’d like to associate it with the images in the Hover stack but like I said above they disappeared once I selected custom trigger. And honestly even if they were there I would have no idea how or where to add that code. Sorry I’m ignorant of what is probably a very basic thing. I’m trying to learn for what it’s worth. PJ ---
**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\ **Post date:** [March 18, 2016, 9:42am UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/10 "2016-03-18T09:42:19Z")
I think you might be over-thinking this and making it a lot more complicated than it has to be. Start with a HoverBox stack in the page. Set the the link address of the HoverBox to simply **#** and give it a class attribute of something like **myTopBox** (you don’t want the HoverBox to link to another page and the class attribute is used as a custom trigger for the desired TopBox stack on the page). HoverBox is now your TopBox trigger. Nothing else to configure in here. ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/3/3647e279d3af3ea0c38c640e2022aa4ba7465b27.png) Go ahead and add a TopBox stack to the page if you’ve not done so yet. You’ll want to set the **TopBox Trigger** to **Custom** and make sure the entry against the **Custom Trigger** setting matches what you gave HoverBox. ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/2/23eb072e67d6452b5e856914b03645a632feb63d.png) The key towards getting this to work is to ensure the custom trigger (e.g. _myTopBox_) is the same for both the TopBox and the HoverBox. Because this is a class attribute, the custom trigger used in TopBox starts with a full stop. Other than that, they’re both identical. Standard web development practices. The flexibility exists to use ID’s or other selectors if you choose too. Keep HoverBox outside of TopBox. Otherwise (as per my previous post) the link layer used for your Topbox trigger will smother the HoverBox stack nested below. The HoverBox stack will not then be able to receive mouse focus and the rollover effects will not work. Use the custom triggers option instead within TopBox. It’s exceptionally powerful and opens up the ability to use TopBox in various configurations, while avoiding conflicts with other stack elements. File download: [https://dl.dropboxusercontent.com/u/422052/HoverBox-TopBox-Combo.zip](https://dl.dropboxusercontent.com/u/422052/HoverBox-TopBox-Combo.zip) [Download link valid for 12 hours only - requires HoverBox, TopBox and Blank theme] ---
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 18, 2016, 5:01pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/11 "2016-03-18T17:01:57Z")
@willwood @dan I can’t even begin to express my appreciation and thankfulness at your excellent description of the method I needed to follow. The screen shots and written explanation were spot on and did what I needed them to do! Will - your level of support and care for my silly issue is amazing and wonderful! I included Dan because I’m hopeful he will mention this on the podcast and feature this testimonial on the website. I’m floored with your response and helpfulness… PEOPLE SPEND MONEY WITH WILL!!! You will not be disappointed! ---
**Author:** ![PAProf](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/paprof/32/1546_2.png) [@PAProf](https://forums.realmacsoftware.com/u/PAProf)\ **Post date:** [March 20, 2016, 1:50am UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/12 "2016-03-20T01:50:14Z")
@willwood sent 30 quid your way today! Enjoy dinner. I wanted to show you what you helped me create. This is not a live site yet - [http://www.kbbdesigns.pjkoltnow.com](http://www.kbbdesigns.pjkoltnow.com) Thanks again, PJ ---
**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\ **Post date:** [August 21, 2016, 11:15am UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/14 "2016-08-21T11:15:02Z")
> [@StarkerMann](#): > > Wanted to thank everyone for all your hard work and help. Greatly appreciated as I’m used to coding/developing in Dreamweaver, etc. Using RW to build a site for a friend so she may update it on the fly during her travels. It’s a bit of a learning curve using a WYSIWYG program. > > I’m creating mouseover/rollover effects with static images that brings up another image (overlay but not covering it completely) indicating the image selected is “actionable” to load another page. That is, create a rollover effect in which an image web object changes on mouse over to another web object and reverts back to the original image on mouse out, preloading on page when loading to ensure they are displayed quickly. The rollover effect should have a link to another page. > > Hype 3.5 Pro elements that can do this may be tricky as they’ll have to be dropped in place with no way to change the URL link inside RapidWeaver (that I know of). Hype’s self-contained animations will work perfectly, it’s the interactions between the self-contained HTML5 “actions” within the customized/blank template I’m using in RW. > > Here’s a link to a site that is essentially what I’m interested in doing using RW: > > Notice when hovering over the images it brings up an overlay image that when clicked on opens another page/link. > > [http://petitepassport.com](http://petitepassport.com) > > Thanks for any help! I’ve not got much experience with using recent versions of Hype. If you’ve got something generated in Hype that you want to use in RapidWeaver, then the free Builder stack can be perfect for this: > **[Builder stack for RapidWeaver](https://stacks4stacks.com/builder/)** > > Build your own stack elements using HTML, CSS, Javascript and other code or libraries. Unlock the full potential of Stacks and RapidWeaver! Just paste the generated JS, CSS and HTML code into the required boxes. I know some people have used Builder stack before in conjunction with Hype, and told me it works perfectly for them. So that might be worth a try. Yes as you’ve pointed out, HoverBox will generate full-sized layers. Possibly you can create your graphics to give the illusion of a background layer. But you would still be using two separate images. It’s not easily feasible to have the topmost layer partially obscure the bottommost layer. The RWExtras company I have recently aquired had an old stack available called ‘animatePro’. It’s not been updated in several years and is not responsive. But it was a close comparison to some of the things you can do with Hype. When I update it and re-release it again, that might do everything (and more) you want. ---
**Author:** ![StarkerMann](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/starkermann/32/4997_2.png) [@StarkerMann](https://forums.realmacsoftware.com/u/StarkerMann)\ **Post date:** [August 21, 2016, 4:38pm UTC](https://forums.realmacsoftware.com/t/looking-for-stack-for-rollover-effect-for-image-to-change-to-another-image/5894/15 "2016-08-21T16:38:11Z")
Wow! Thank you so much! I woke this morning and was pleasantly surprised by the numerous responses. I’ve yet had the chance in reading and responding to them but will do so now. It’s been a slight challenge using a WYSIWYG builder as I’m used to hands-on coding, etc., a bit ironic in some aspects. Thankfully the RapidWeaver forums are extremely helpful and thank you for taking the time in helping me. Hype 3.5 Pro has greatly improved and well worth the investment as a time saving, versatile HTML5 builder. Thanks so much for confirming it works with RW and recommending the Builder stack, a relief as I already have everything done. Congratulations on the RWExtras acquisition and definitely keep me posted on any development with “animatePro”, I’m definitely interested. Thanks for all your help!