Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Visual Index - show captions on hover

 

Indexhibit version: 2.0
Thread is not resolved.

pablosanruiz
SPAIN
2 year(s) ago
Permalink Post

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
SPAIN
2 year(s) ago
Permalink Post

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
SPAIN
2 year(s) ago
Permalink Post

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
SPAIN
2 year(s) ago
Permalink Post

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
SPAIN
2 year(s) ago
Permalink Post

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


linuesa.net/
7
UNITED KINGDOM
2 year(s) ago
Permalink Post

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
GREECE
2 year(s) ago
Permalink Post

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
UNITED KINGDOM
2 year(s) ago
Permalink Post

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
ITALY
2 year(s) ago
Permalink Post

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
BRAZIL
2 year(s) ago
Permalink Post

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
NETHERLANDS
2 year(s) ago
Permalink Post

@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
BRAZIL
1 year(s) ago
Permalink Post

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
FRANCE
1 year(s) ago
Permalink Post

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

davidlur
UNITED STATES
1 year(s) ago
Permalink Post

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
BRAZIL
1 year(s) ago
Permalink Post

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
BRAZIL
1 year(s) ago
Permalink Post

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

Showing 1 - 16 of 16 posts in Forum » Customize » Visual Index - show captions on hover
 

This thread has been closed, thank you.