Image on hover effects and captions

[superphi]

Theme: Neighborhood

Hi, is there documentation on shortcodes for “on hover” effects. I have some boxes under the slideshow currently and would like the picture to zoom in on hover as opposed to having a transparent green box overlay with a magnifying glass.

I have seen this example on your demo site when hovering over the POSTS/ARTICLES images.

I have used “single image” as the box but maybe I am supposed to use something else.

I would also like to have captions inside of the box and not below the box. For example a picture of a suit with “Spring Summer Collection” on top of the picture.

I have looked through the documentation and can not find anything

Where the site is currently hosted….
http://www.moobyte.com/wordpress

[Kyle – SUPPORT]

Disable the lightbox effect on your image element, as I’m guessing you want these images to link to the relevant pages, then try this custom css for the zoom:

.spb_single_image figure a {
  overflow: hidden;
}
.recent-post figure:hover img {
  transform: scale(1.2);
}
.spb_single_image figure img {
  transition: all 0.3s ease-in-out 0s;
}

This will apply the zoom hover, however it’s not possible to put the captions over the top of images without editing the code, which is beyond the support that we can offer as it is more than a basic customisation.

– Kyle

[superphi]

Hi, the transform includes the borders as well.
I would have liked to put a caption underneath the image but when you do so, the transform takes up the entire div ie the height of the image + the caption instead of transforming contained within the border of the image

http://www.moobyte.com.gridhosted.co.uk its on the homepage for you to see. i have taken the captions off for the time being

Thank you

[Kyle – SUPPORT]

Hi

You need to put the border on the figure instead of the image, please remove it from the image and add this css:

.borderframe figure {
  -moz-box-sizing: border-box;
  border: 6px solid #eeeeee;
  width: 100%;
}

– Kyle

[superphi]

Not quite what i wanted but will do!

Thanks

[Kyle – SUPPORT]

Ok no problem