I've found a lot of threads asking how to make a basic :hover effect appear on thumbs in Visual Index, so the question seemed pretty simple and easily answered.
The thing is, as far as I know the answers worked only if the effect was applied to the image, but what if along with the :hover effect on the image one wanted to make the title show up as well over the image, and still be able to click through the whole thing?
So... after several attempts and some hacking of the format.visual_index.php file I thought I had made it happen (had to switch around the .captioning class div so that it'd be included within the a tag and add some custom css at the end).
See here: blukaet.com/…">blukaet.com/… or blukaet.com/…">blukaet.com/…
All was fine and dandy... but then I sadly found out that if the thumbs had different shapes (i.e. "natural"), the effect would "memorise" the shape of the last thumb and apply it to all the other images.
See, indeed, here: blukaet.com/misc/grphc-dsgn/">blukaet.com/misc/grphc-dsgn/
Below is the CSS part from the format.visual_index.php file that I amended in order to make the :hover effect happen.
function defaultCSS(){$OBJ =& get_instance();
$align = " text-align: " . $this->align . ";";
$talign = $this->align;
$top_padding = (($OBJ->vars->exhibit['thumbs'] - $this->size[1]) / 2);
$grid = ($OBJ->vars->exhibit['break'] >= 1) ? 'width: ' . (($OBJ->vars->exhibit['break'] * ($this->picture_block_padding_right + $OBJ->vars->exhibit['thumbs'])) + 1) . 'px' : '';
$title_block = ($OBJ->vars->exhibit['titling'] == 1) ? $this->text_block_height : 0;
$picture_height = ($OBJ->vars->exhibit['thumbs_shape'] == 0) ? "height: " . $this->x . "px;" : '';
$picture_width = ($this->grid == (0 || 1 || 2 || 3)) ? "width: " . $this->x . "px; " : '';
$caption_width = ($this->grid == 5) ? 0 : 'width: ' . $OBJ->vars->exhibit['thumbs'] . 'px;';
$caption_height = "height: " . $this->size[1] . "px;";
return "#img-container { {$grid} }
#img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
#img-container #text p { width: " . $this->text_width . "px; }
#img-container .picture_holder { float: left; padding: 0 0 0 0; }
#img-container .picture { position: relative;{$align} }
#img-container .picture { {$picture_width}{$picture_height} }
#img-container .captioning { {$caption_height} text-align: center;{$caption_width} top:0; margin-top: {$top_padding}px; position: absolute; opacity: 0; background-color: rgba(21,21,21, 0.6);}
#img-container .captioning .title { margin-top: 0; text-align: {$talign}; top: 48%; position: relative; }
#img-container .captioning:hover { opacity:1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}";
}
Mind you, I can't write code from scratch, as my knowledge is limited only to moving around, copying & pasting stuff that's already there. So I guess I must have overlooked some part that makes it adapt it to every thumbnail, leaving me with that weird shape-of-the-last-thumb overlay instead of one corresponding to each thumbnail.
I can't seem to find a solution around it. Can anyone help or point me in the right direction? Thanks.