Title: Overlay break floating images
Last modified: August 20, 2016

---

# Overlay break floating images

 *  Resolved [pako69](https://wordpress.org/support/users/pako69/)
 * (@pako69)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/overlay-break-floating-images/)
 * Hi,
    All is working nice except if you want to have the nice overlay features
   on float right or left image : the imaga stop to float…
 * Thanks
 * [http://wordpress.org/extend/plugins/jquery-colorbox/](http://wordpress.org/extend/plugins/jquery-colorbox/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Contributor [techotronic](https://wordpress.org/support/users/techotronic/)
 * (@techotronic)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/overlay-break-floating-images/#post-3148427)
 * Hi,
 * yes, you’re right.
    I haven’t found a way to fix that yet.
 * Cheers,
    Arne
 *  Thread Starter [pako69](https://wordpress.org/support/users/pako69/)
 * (@pako69)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/overlay-break-floating-images/#post-3148428)
 * Yes the problem is with jquery-colorbox-zoom.css and this CSS class :
    a.zoomLink
 * The code is :
    position: relative; display: inline-block;
 * It works great for images that are not floating.
 * Ok, now it seems that your plugin add some extra code to the img tag like:
    <
   img class=”alignright size-thumbnail wp-image-25 **colorbox-1**“
 * If you could read/parse the CSS class inside the img tag, then you could do something
   like :
 * is there a “alignright” or “alignleft” CSS class in it ?
    > Yes ? > is it “alignright”?
   > Yes ? > load the right CSS stylesheet jquery-colorbox-zoom-right.css > is it“
   alignleft” ? > Yes ? > load the right CSS stylesheet jquery-colorbox-zoom-left.
   css > else : load the right CSS stylesheet jquery-colorbox-zoom.css
 * Where jquery-colorbox-zoom-left.css contain this :
    a.zoomLink { position: relative;
   display: inline-block; float:left; }
 * and where jquery-colorbox-zoom-right.css contain this :
    a.zoomLink { position:
   relative; display: inline-block; float:right; }
 * jquery-colorbox-zoom.css still unchanged
 * 🙂
 *  Plugin Contributor [techotronic](https://wordpress.org/support/users/techotronic/)
 * (@techotronic)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/overlay-break-floating-images/#post-3148431)
 * Hi,
    yeah, that’s what I already implemented, but that only solves half the problem.
   The image tag has margin and padding applied to it when it’s floating in most
   themes. Since I can’t place the hover-element into the image (img tag is not 
   allowed to have children) but into the link alongside the image, it’s really 
   only luck if the hovering magnifying glass is placed over the center of the image…
 * Anyway, I just released version 4.5 where at least the zoom hover doesn’t break
   floating images any more.
 * Cheers,
    Arne

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Overlay break floating images’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/jquery-colorbox_848c98.svg)
 * [jQuery Colorbox](https://wordpress.org/plugins/jquery-colorbox/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jquery-colorbox/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jquery-colorbox/)
 * [Active Topics](https://wordpress.org/support/plugin/jquery-colorbox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jquery-colorbox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jquery-colorbox/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [techotronic](https://wordpress.org/support/users/techotronic/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/overlay-break-floating-images/#post-3148431)
 * Status: resolved