Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

captions over visual index images on hoover

 

Indexhibit version: 2.0
Thread is not resolved.

mbrenon
FRANCE
2 year(s) ago
Permalink Post

hey - i'm trying to make appear on hoover the captions of my visual index images.

the only thing i could have by myself is to make the captions appear when the images disapear on hoover.

I've tried this and all the possible combinations but it didn't work :
#img-container .captioning .title { z-index:-1; position: relative; margin-top: -130px; text-align: {$talign}; }
#img-container .picture_holder a img:hover {opacity: 0; filter:alpha(opacity=0); -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; }

Can anyone help ?

arsondpi
GREECE
2 year(s) ago
Permalink Post

Have you got a working example?

mbrenon
FRANCE
2 year(s) ago
Permalink Post

that site might be useful : d-u-r-s-t.com/

mbrenon
FRANCE
2 year(s) ago
Permalink Post

if you guys need more details to help me solve my issue, feel free to ask :-)

arsondpi
GREECE
2 year(s) ago
Permalink Post

Your image titles fade in on hover.
I'm not sure I understand what you're after though...

mbrenon
FRANCE
2 year(s) ago
Permalink Post

oh sorry!
i'd like to see the caption on the visual index images, not under

The image now disapears on hover which is not good to me...

mbrenon
FRANCE
2 year(s) ago
Permalink Post

hello - do you guys need more information to sort this out?

mbrenon
FRANCE
2 year(s) ago
Permalink Post

hello - do you guys need more information to sort this out?

arsondpi
GREECE
2 year(s) ago
Permalink Post

But this is a custom format - it's not something that came with the default formats/plugins of indexhibit.
Anyhow I had a quick look at your source code and I think you need to customize your inline javascript code into:

  1. $(document).ready(function(){
  2.     // hover for the thumb info text
  3. // this will fade in the exhibit title on mouse hover. Also makes the current thumbnail transparent.
  4. thehoverstuff = function(){
  5. $('.thumb-it a').hover(function(){ // mouseover
  6. $(this).children('.thumbtext').fadeIn('slow'); 
  7. $(this).children('img').animate({'opacity' : 1.0});},function(){ //mouseout
  8. $(this).children('.thumbtext').fadeOut('slow');
  9. $(this).children('img').animate({'opacity' : 1.0}); });
  10.                           };
  11. thehoverstuff();
  12. // end hoverstuff...
  13.     });

This will keep images from fading out on hover.
I don't recognize the format though and I can't tell you where you should be looking at...

 

This thread has been closed, thank you.