# Text hovering showing side image?

**URL:** https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675
**Category:** RapidWeaver Classic
**Created:** [March 4, 2016, 10:18am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675 "2016-03-04T10:18:20Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 4, 2016, 10:18am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/1 "2016-03-04T10:18:20Z")

</div>

Hi,  
I was wondering how to do, or if a stack does this

My page would have 3 or 4 text boxes on the left, and when one hovers over (or touch on tablets/smartphones) the text boxes, an image would appear on the right.

Example: 3 Text boxes, 1 image

Mt Hood  
Mt St Helens | PICTURE |  
Mt Adams

When the user hovers on Mt Hood, the picture would be Pic1, when on Mt St Helens, the picture would be Pic2, etc…

Any way to do this? I have a lot of lightbox and slideshow stacks, but I don’t seem to have found one that would trigger a picture display when hovering over Text…

Thanks for any recommandation

---

<div class="post-metadata">

### Author: ![Turtle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/turtle/32/1438_2.png) [@Turtle](https://forums.realmacsoftware.com/u/Turtle)
#### Post date: [March 5, 2016, 1:32am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/2 "2016-03-05T01:32:01Z")

</div>

@sjordi

You might want to give @instacks [Gallery Stack](http://instacks.com/gallerystack/) a looksee…

Brad

---

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 5, 2016, 6:58am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/3 "2016-03-05T06:58:51Z")

</div>

Thanks but I don’t see anything like what I’m looking for.  
Only one picture, always at the same place changing when txt in a column stack is touched…

All demos show all pictures.  
I need all the text and only one picture

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 5, 2016, 8:42am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/4 "2016-03-05T08:42:49Z")

</div>

I had a old test project in RW 4 or RW 5 with this effect (build with code), but I can’t find it, now.  
I’m searching my files and hope to find it 😉

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 5, 2016, 9:24am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/5 "2016-03-05T09:24:33Z")

</div>

@sjordi

Here an alternative (not perfect what you want) but with this Stack, you are on the right side.  
But you must click, not mouse hover/over.

Responsive LightBox from CosCulture  
[http://www.cosculture.com/plugins-stacks/product/responsive-lightbox/](http://www.cosculture.com/plugins-stacks/product/responsive-lightbox/)

… and another with the same effect, from stacks4stacks.  
[https://stacks4stacks.com/topbox/](https://stacks4stacks.com/topbox/)

… and I am searching my projects 😉

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 5, 2016, 10:41am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/6 "2016-03-05T10:41:14Z")

</div>

@sjordi

I have found the code. But I see that it is not text but a thumbnail with the hover effect.  
Maybe I / you can modify the code appropriately. Are you interested?  
It is important with which theme the CSS code is used. Must be set differently for each theme.

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/a/a1904d3c157f872f67afefc8a197fd56ca6ee78f.png)

---

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 5, 2016, 1:20pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/7 "2016-03-05T13:20:32Z")

</div>

Hi,  
I thought about implementing Javascript to handle such a thing, but was looking for the lazy way… And I’m not sure whether the javascript would see the difference between a mouse click and a tablet/phone finger tap. It’s probably possible to adapt your code.

---

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 5, 2016, 1:23pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/8 "2016-03-05T13:23:25Z")

</div>

Thanks, tried both but none is doing what I want.

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 5, 2016, 1:39pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/9 "2016-03-05T13:39:59Z")

</div>

> [@sjordi](#):
>
> Hi,I thought about implementing Javascript to handle such a thing, but was looking for the lazy way… And I’m not sure whether the javascript would see the difference between a mouse click and a tablet/phone finger tap. It’s probably possible to adapt your code.

@sjordi

I have adapted the code (on the theme HV Stripped). That was very simple.  
With or without thumbnails, as you wish.  
Maybe you like it that way. Without Javascript.

Try this code with my pictures. Should immediately work with HV Stripped (and others, but not perfect).  
[Look here!](http://www.oscar-schmid.ch/testsites/hoverbild/)  
Once with thumbnail  
then without image  
3 and 4 only with links

Get yourself a code 😉

`<div class="gallerycontainer">`

`<a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="80px" height="50px" border="0" /><span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>`

`<a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="0px" height="0px" border="0" />Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>`

`<a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><div align="center">Hallig klein</div></span></a>`

`<a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a></div>`

**Here the CSS code**

gallerycontainer{  
position: relative;  
/_Add a height attribute and set to largest image’s height to prevent overlaying_/  
}

.thumbnail img{  
margin: 0 5px 1px 0;  
}

.thumbnail:hover{  
background-color: transparent;  
}

.thumbnail:hover img{  
}

.thumbnail span{ /_CSS for enlarged image_/  
position: absolute;  
left: -1000px;  
visibility: hidden;  
text-decoration: none;  
color: black; /_Text Color for enlarged image_/  
}

.thumbnail span img{ /_CSS for enlarged image_/  
padding: 0px;  
}

.thumbnail:hover span{ /_CSS for enlarged image_/  
visibility: visible;  
top: 45px;  
left: 250px; /\*position where enlarged image should offset horizontally \*/  
z-index: 50;  
}

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 6, 2016, 9:03am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/10 "2016-03-06T09:03:29Z")

</div>

@sjordi  
Here another code, image in Resources and image responsive. [Look here!](http://www.oscar-schmid.ch/testsites/hoverbild/)

`<div class="gallerycontainer">`

**width and height 0px**  
`<a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="0px" height="0px" border="0" />Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>`

**Thumbnail and image on server**  
`<a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="80px" height="50px" border="0" /><span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>`

**image on server, subtitle centered**  
`<a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><div align="center">Hallig klein</div></span></a>`

**image in resources, size original**  
`<a class="thumbnail"/>Here text for a link<span><img src="%resource(halligmit.jpg)%" /><br />Hallig klein</span></a>`

**image responsive**  
`<a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligmit.jpg" width="100%"/><br />Hallig</span></a></div>`

---

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 6, 2016, 9:43am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/11 "2016-03-06T09:43:34Z")

</div>

Perfect,

Exactly what I’m looking to achieve. Thanks a lot  
How great is that?  
Thanks

Steve

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 6, 2016, 10:37am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/12 "2016-03-06T10:37:55Z")

</div>

> [@sjordi](#):
>
> Perfect,
> 
> Exactly what I’m looking to achieve. Thanks a lot  
> How great is that?  
> Thanks
> 
> Steve

… my pleasure 😉 but I don’t understand your question "How great is that?  
How great is what?

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 6, 2016, 12:39pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/13 "2016-03-06T12:39:34Z")

</div>

@sjordi

My favorite code for this 😉

**My favorite 1**  
_Image in resources_  
_responsive_  
_title centered_  
_with thumbnail link_

**My favorite 2**  
_Image in resources_  
_responsive_  
_title centered_  
_with textlink_

`<div class="gallerycontainer">`

`<a class="thumbnail" href="#thumb"><img src="%resource(halligmit.jpg)%" width="80px" height="50px" /><span><img src="%resource(halligmit.jpg)%" width="100%"/><div align="center">Hallig klein</div></span></a>`

`<a class="thumbnail"/>Here text for a link<span><img src="%resource(halligmit.jpg)%" width="100%"/><div align="center">Hallig klein</div></span></a></div>`

---

<div class="post-metadata">

### Author: ![Turtle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/turtle/32/1438_2.png) [@Turtle](https://forums.realmacsoftware.com/u/Turtle)
#### Post date: [March 6, 2016, 2:44pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/14 "2016-03-06T14:44:42Z")

</div>

@Oscar

> [@Oscar](#):
>
> but I don’t understand your question "How great is that?How great is what?

It’s a compliment saying WOW! You rock for providing such a thing on the forums, thank you!! 🙂

Brad

---

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 6, 2016, 3:51pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/15 "2016-03-06T15:51:30Z")

</div>

Yes, that0s what I meant. “This is really cool”…

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 6, 2016, 4:04pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/16 "2016-03-06T16:04:51Z")

</div>

Thanks Brad, thanks Steve @Turtle @sjordi

For me, it is sometimes difficult to understand the fineness of the English language, I’m Swiss German 😉

---

<div class="post-metadata">

### Author: ![sjordi](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@sjordi](https://forums.realmacsoftware.com/u/sjordi)
#### Post date: [March 6, 2016, 6:47pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/17 "2016-03-06T18:47:03Z")

</div>

Don’t worry Oscar… I’m Swiss French 🙂 Sometimes, after a long practice it comes naturally (Ok, I used to live in the US, that helps a lot too)

---

<div class="post-metadata">

### Author: ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)
#### Post date: [March 6, 2016, 6:56pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/18 "2016-03-06T18:56:28Z")

</div>

@sjordi  
Hello Steve  
Thanks for the cheering up 😉

---

<div class="post-metadata">

### Author: ![Turtle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/turtle/32/1438_2.png) [@Turtle](https://forums.realmacsoftware.com/u/Turtle)
#### Post date: [March 6, 2016, 7:01pm UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/19 "2016-03-06T19:01:07Z")

</div>

@Oscar

No worries Oscar, we still love ya 🙂 The english language, slang, idiosyncrasies are hard to learn/understand even when you know the darned language lol

Brad

---

<div class="post-metadata">

### Author: ![dellmerca](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@dellmerca](https://forums.realmacsoftware.com/u/dellmerca)
#### Post date: [July 7, 2017, 6:50am UTC](https://forums.realmacsoftware.com/t/text-hovering-showing-side-image/5675/20 "2017-07-07T06:50:15Z")

</div>

Check this one…[CSS Hover Effects](http://www.corelangs.com/css/box/hover.html)