captions over visual index images on hoover

mbrenon / 2013-05-01 16:24:54   

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 / 2013-05-01 17:31:39   

Have you got a working example?

mbrenon / 2013-05-01 18:29:04   

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

mbrenon / 2013-05-03 17:00:13   

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

arsondpi / 2013-05-03 18:11:22   

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

mbrenon / 2013-05-03 22:11:17   

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 / 2013-05-09 08:54:43   

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

mbrenon / 2013-05-16 19:37:07   

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

arsondpi / 2013-05-17 10:40:28   

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.