Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Indexhibit was updated to version 2.1.4 on April 10, 2017.

Rollover effect in visual index with title over images

 

Indexhibit version: 2.0
Thread is resolved.

lebiniou
FRANCE
4 year(s) ago
Permalink Post

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

arsondpi
GREECE
4 year(s) ago
Permalink Post

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.

lebiniou
FRANCE
4 year(s) ago
Permalink Post

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…

lebiniou
FRANCE
4 year(s) ago
Permalink Post

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

7
UNITED KINGDOM
4 year(s) ago
Permalink Post

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.

lebiniou
FRANCE
4 year(s) ago
Permalink Post

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

Best Answer!
arsondpi
GREECE
4 year(s) ago
Permalink Post

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.

lebiniou
FRANCE
4 year(s) ago
Permalink Post

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.

arsondpi
GREECE
4 year(s) ago
Permalink Post

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

lebiniou
FRANCE
4 year(s) ago
Permalink Post

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 !

arsondpi
GREECE
4 year(s) ago
Permalink Post

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

lebiniou
FRANCE
4 year(s) ago
Permalink Post

Ok, I will do this, thank you again.

 

This thread has been closed, thank you.