Indexhibit Support

Hello,
I'm trying to have a rollover effect with text over the pictures of the visual index.
I found this example on the forum which is exactly what I would like to do :
wedonotsleep.com (on this thread : indexhibit.org/forum/thread/15326/)
I succeed in doing the overlay on the picture, but I would like the text over the picture just like in the example. I tried the advices on this thread, and from other, but it didn't work. I know it's possible but I didn't find how.
thanks for your help.
my site : sebastienpelon.com

Hello.

Ok - I took some time to do this and I will need you to check if something like the following will work:

1. #img-container .picture_holder {
2.     position: relative;
3. }
4. #img-container .captioning {
5.     display: table;
6.     height: 100%;
7.     position: absolute;
8.     text-align: center;
9.     top: 0;
10.     {$caption_width}
11.     z-index: 1;
12. }
13. #img-container .captioning div {
14.     display: table-cell;
15.     vertical-align: middle;
16.     color: transparent;
17. }
18. #img-container .captioning:hover {
19.     background: rgba(255,255,255, 0.8);
20. }
21. #img-container .captioning div:hover {
22.     color: #000;
23. }

Of course you'll add these in the end of the css part of the Visual Index format - you may also need to adjust their values.

Hello,
Thanks a lot for your answer and the time you spend on it.
I paste the code at the end of the format.visual_index.php, then try to replace the existing code about img container, but each time, I get this error message :
Parse error: syntax error, unexpected T_STRING, expecting T_FUNCTION in /home/sebasti7/public_html/ndxzsite/plugin/format.visual_index.php on line 744.
(I checked the 774 line, and it's a })
I think I did something wrong but I don't know what.
Thanks again for you help…

I hadn't see your second post, I will try this, thanks again !

I tried this the first time round, got the opacity hover working but like lebiniou, not the titles. Couldn't get this method working either! It seems to make a few changes, but not the titles still. Although, my site is relatively heavily styled so this may be why for me.

I tried the second code, unfortunately, it still doesn't work, still a error message.
(The opacity over works for me too, but I did it in the style.css.)

I deleted my second post because it needed refinement.

...double checked my first solution which killed the thumbnail from being a link!
Bummer!
:-/
You'll need to edit the plugin and possibly add stuff to have complete control and do this right.

However here's another alternative that will work just fine:
First delete the css rule from the other post

1. a img:hover {
2.     opacity: 0.1;
3. }

you don't need this as we're doing things a different way.
Initially in the end of the Visual Index format you have this:

1. return "#img-container { {$grid} }
2. #img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
3. #img-container #text p { width: " . $this->text_width . "px; }
4. #img-container .picture_holder { float: left; }
5. #img-container .picture { position: relative;{$align} }
6. #img-container .picture { {$picture_width}{$picture_height} }
7. #img-container .picture_holder { padding: 0 0 0 0; }
8. #img-container .captioning { height: {$title_block}px; text-align: center;{$caption_width} }
9. #img-container .captioning .title { margin-top: 3px; text-align: {$talign}; }";
10.     }
11. }

change to something like

1. return "#img-container { {$grid} }
2. #img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
3. #img-container #text p { width: " . $this->text_width . "px; }
4. #img-container .captioning .title { text-align: {$talign}; }
5. #img-container .picture_holder {
6.     position: relative;
7.     padding: 0;
8.     float: left;    
9. }
10. #img-container .captioning {
11.     display: table;
12.     position: absolute;
13.     text-align: center;
14.     top: 0;
15.     height: 100%;
16.     {$caption_width}
17. }
18. #img-container .captioning div {
19.     display: table-cell;
20.     vertical-align: middle;
21. }
22. #img-container .picture {
23.     {$picture_width}
24.     {$picture_height}
25.     position: relative;
26.     {$align}
27.     z-index: 1;
28. }
29. #img-container .picture:hover {
30.     opacity: 0.2;
31. }
32. ";
33.     }
34. }

Again you'll add these in the end of the css part of the Visual Index format - you may also need to adjust their values.

Yes!! It just work fine, thank you.
I just don't succeed in centering the text on the vertical, I changed a few parameters but it doesn't affect the position on top of the thumbnail.

Yes you are right.
#img-container .captioning needs a height: 100%; instead of $picture_height}.
I corrected the post above...

This is a workaround though - to have complete control and to do this properly you'd need to edit even more code.
Also this gives you a rough idea that customizations are all about trial and error - and spare time.
...and patience - lol

Perfect, it works perfect this way! thanks
There's still one thing I don't understand, there's a few px margin bottom with the background color and I don't know why, and of course, how to fix it :-)
Once again, thanks a lot for your help !

in line 28 in your style.css has a background color. Use Firebug the Firefox plugin to track down these sorts of things.

Ok, I will do this, thank you again.