Text hovering showing side image?


(Steve Jordi) #1

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


(Brad Halstead) #2

@sjordi

You might want to give @instacks Gallery Stack a looksee…

Brad


(Steve Jordi) #3

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


(Oscar Schmid) #4

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 :wink:


(Oscar Schmid) #5

@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/

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

… and I am searching my projects :wink:


(Oscar Schmid) #6

@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.


(Steve Jordi) #7

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.


(Steve Jordi) #8

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


(Oscar Schmid) #9

@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!
Once with thumbnail
then without image
3 and 4 only with links

Get yourself a code :wink:

<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;
}


(Oscar Schmid) #10

@sjordi
Here another code, image in Resources and image responsive. Look here!

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


(Steve Jordi) #11

Perfect,

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

Steve


(Oscar Schmid) #12

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


(Oscar Schmid) #13

@sjordi

My favorite code for this :wink:

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>


(Brad Halstead) #14

@Oscar

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

Brad


(Steve Jordi) #15

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


(Oscar Schmid) #16

Thanks Brad, thanks Steve @Turtle @sjordi

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


(Steve Jordi) #17

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


(Oscar Schmid) #18

@sjordi
Hello Steve
Thanks for the cheering up :wink:


(Brad Halstead) #19

@Oscar

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

Brad


(dellmerca) #20

Check this one…CSS Hover Effects