Visual Index - show captions on hover

pablosanruiz / 2012-12-07 11:10:52   

Hi! I'm looking for a way of keeping captions hidden and display when hover on thumbnails. Something like the old Masonry Timthumb plugin. I have been reading all threads about visual index and hovering, but I can't find any information. Is there any way to do this in version 2?

Thanks!

pablosanruiz / 2012-12-09 19:28:14   

Well, I think this could work.

I added this in my style.css

.picture { background:#fff; }
.picture_holder a img:hover { opacity: 0; filter:alpha(opacity=0); }
.top a img:hover { opacity:1; }

And then, I edited the last lines of format.visual_index.php adding a z-index and a negative top margin for the captions, hiding the caption behind the thumbnails:

#img-container .picture { z-index:1; position: relative;{$align} }
#img-container .picture { z-index:1; {$picture_width}{$picture_height} }
#img-container .picture_holder { padding: 0 0 0 0; }
#img-container .captioning { position: relative; z-index:-1; height: {$title_block}px; text-align: center;{$caption_width} }
#img-container .captioning .title { position: relative; z-index:-1; margin-top: -110px; text-align: {$talign}; }";

linuesa / 2012-12-10 19:08:45   

This doesn't work for me....
I have this code on my style.css:

  1. /* roll over visual index */
  2. .format-visual_index .picture {background:#000000; height: 200px }
  3. .format-visual_index a img:hover {opacity:.50; filter:alpha(opacity=50); }
  4. .format-visual_index .top a img:hover {opacity:1;}
  5. .format-visual_index .picture a:hover {background: none;}

/* link clear on slideshow */
#exhibit #slideshow a:hover { background: transparent; }

pablosanruiz / 2012-12-10 20:40:53   

Hi linuesa. I think you can do it playing with the z-index values for picture and captions. Have you edited the visual_index php?

linuesa / 2012-12-11 22:06:08   

Yes, like you said, and doesn't work...
This is my site:


linuesa.net/
7 / 2013-03-06 14:15:44   

I Couldn't get that to work for me either. From other threads I've seen it done like this: wedonotsleep.com/

However I can't quite get that to work either.

arsondpi / 2013-03-06 15:28:49   

Guys I've started working on this a few weeks ago.
Apparently to make this work right with all Visual Index options, you need to change the order of the html inside the actual plugin and apply/change certain css rules.

7 / 2013-03-06 22:55:02   

Hi Arson, yeah I got to the point of getting the caption centered, the opacity overlay rollover; but couldn't get the caption to appear on rollover too. It was just always present. Did you get it working? They've nailed it on that site I linked

vitaminic / 2013-04-21 23:53:16   

There is some news? I dont understand where to change z-index for visual index picture, they stay always on top and cannot create a layer over ( black layer with some text for example, ora another image showing on hover through css )

Cheers!

renno / 2013-05-28 05:36:12   

I am using visual Index + thickbox (beta)
I managed to make it work, but how can i make a background color when i hover above it?
and other question, i tried to align the text centered but it just doesn't work properly i am not sure if it is a issue of the visual index beta or something i am doing...
My website:
renno.info
Thanks in advance

Kubmin / 2013-06-18 08:49:02   

@renno
change the color code in the first line

.picture { background:#fff; }
.picture_holder a img:hover { opacity: 0; filter:alpha(opacity=0); }
.top a img:hover { opacity:1; }

renno / 2013-06-25 01:25:43   

Thanks Kubmin, in fact i was trying to make it red with white captions on it, but once i put the background in a different color, the captions looks that are bellow it so i can't see it...
Other issue is that some of the color "bleeds" bellow the image, so i can actually see a bit of it when i'm not hovering on it...
Last but not least, is there a way to make it centered no matter of the size and format of the image?
thanks again!

nathalizator / 2013-09-05 13:15:48   

Did you finally get how to do it? i'm curious to know how ?

davidlur / 2013-09-09 13:40:53   

for those that have an issue with making the caption appear try an alpha filter instead of a background color:

.picture {filter:alpha;}

instead of

.picture { background:#fff; }

renno / 2013-09-11 04:29:45   

Still not working,
I am supposed to make the alpha filter with 0 oppacity or add other value?
and how do I made the background red without bleeding when the image is not hovered?
sorry I don't get it...

renno / 2013-09-12 00:48:11   

Just to ilustrate:
I'm trying to do something like that freytaganderson.com/… (the fancy transition is nice, and the tag lists over the works are cool too, but is not necessary right now, but it would be nice to know how to do as well, if someone knows how to do it btw )...
Thanks

This thread has been closed, thank you.