Indexhibit

Login:

Created by:
Daniel Eatock &
Jeffery Vaska

Built with Indexhibit

Visual Index - show captions on hover

 

Indexhibit version: 2.0
Thread is not resolved.

pablosanruiz
SPAIN
7 month(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
7 month(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
7 month(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
7 month(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
7 month(s) ago
Permalink Post

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


linuesa.net/
7
UNITED KINGDOM
4 month(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 A
GREECE
4 month(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
4 month(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 month(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
3 week(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
22 hour(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; }

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

You need to be logged in to post.