Snippets/Image Expand on Hover

How to use Snippets
List of Snippets

Image Expand on Hover
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description

Enables the user to create a gallery of images where the image expands to twice it's normal size when Hovered over by the mouse or by the hand on touch devices. Tested in most of the major browsers. Works with all the Mediawiki galleries, but will not work with a "LightBox" feature meaning it's doubtful it will work with the new MediaViewer. Will work with Extension:JavascriptSlideshow.

Update: I just rechecked and it does seem to work even if a "LightBox" feature is active on click. Semantic Mediawiki gallery results will expand upon hover, but will overlay on click. The Lightbox feature works inside the Foreground skin (so I assume it will work in the MediaViewer coming out in 1.23).

Visual Example

Normal Gallery (packed mode):

Expanded Image same gallery:

Usage

Gallery, or Image, must be between the following division tags:<div class="zoom_img"> </div>

Example:

<div class="zoom_img" >
{{Mediawiki Galleries
|Photos=Astronotus_ocellatus.jpg/Salmonlarvakils.jpg/Georgia Aquarium - Giant Grouper.jpg/Pterois volitans Manado-e.jpg/Fishmarket 01.jpg/Pseudorasbora parva(edited version).jpg/MC Rotfeuerfisch.jpg/Cleaning station konan.jpg
|caption=Testing
|mode=packed
|width=200
|height=200
|perrow=3
}}</div>

Mediawiki Galleries is a name of a template I use on my site. This would work equally well between a gallery opening tag ‎<gallery> and an ending tag ‎</gallery>.

Code

Expand upon Hover.css:

/* CSS Hover Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
 */

.zoom_img img{
    transition:transform 0.1 ease-in;
}

.zoom_img img:hover{
    transform:scale(2);
}

Changing Size of Expanded Image

One can change the size of the expanded Image by changing the scale function inside the CSS Code. Additionally, you could in theory change it by a page by page basis if you're using Extension:CSS.