Snippets/Image Expand on Hover
 | |
|---|---|
| Language(s): | CSS |
| Compatible with: | MediaWiki 1.22+ (all) |
Description
[edit]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
[edit]Normal Gallery (packed mode):
Expanded Image same gallery:
Usage
[edit]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
[edit]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
[edit]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.