Question

i’m using the greyscale jquery plugin to grayscale images on the fly (by Andrew Pryde).

The effetc works like a charm :
http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/1-test-jquery-greyScale-html5.html

But i try to add another jquery function : Show information over image on rollover.

The function works alone but with the plugin i have a css issue. Images are not floating anymore :
http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/3-test-jquery-hover-greyScale-html5.html

Could you help me to find what is wrong in the css ?

source code (css, html, jquery are easy to find in the example).

Thank you very much !

Answer 1

It’s because you’ve wrapped the images with captions inside block elements, which span the entire width of their containers. float applies to the grayscaled images, not to their parent elements, so even though all the images are floated, they are no longer siblings of each other; they are siblings of the hover wrappers.

The images are still floated, but they are alone inside their containers (the wrappers), and the wrappers are not floated.

You can add hover captions without any JS: simply add the caption as another element inside each .gsWrapper element, and style it to show on hover.

Stripped-down example:

<div class="gsWrapper">
  <img class="img_mosaique_cat_projets noir_blanc" src="img/sj-concelles/220x168.jpg" alt="titre projets">
  <canvas class="gsCanvas" height="168" width="220" style="left: 0px; position: absolute; top: 0px;"></canvas>

  <div class="hide-hover">test content for hover</div>
</div>

And the styling:

.hide-hover {
  position: absolute;
}

.gsWrapper:not(:hover) .hide-hover { 
  display: none;
}

This way you do not have to worry about adjusting all your other styling and JS to accommodate for wrappers around some of the images.

Other demos: using jQuery slideToggle effect to hide/show the captions: http://jsbin.com/idugaw/3/edit

using pure CSS for a slideToggle effect: http://jsbin.com/idugaw/4/edit