PHPackages                             xj/yii2-hoverzoom-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. xj/yii2-hoverzoom-widget

ActiveLibrary[Utility & Helpers](/categories/utility)

xj/yii2-hoverzoom-widget
========================

yii2-hoverzoom-widget

1.0.0(11y ago)1832BSD-3-ClauseJavaScript

Since Feb 22Pushed 11y ago2 watchersCompare

[ Source](https://github.com/xjflyttp/yii2-hoverzoom-widget)[ Packagist](https://packagist.org/packages/xj/yii2-hoverzoom-widget)[ RSS](/packages/xj-yii2-hoverzoom-widget/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

yii2-hoverzoom-widget
=====================

[](#yii2-hoverzoom-widget)

[http://www.htmldrive.net/items/demo\_show/1133](http://www.htmldrive.net/items/demo_show/1133)

composer.json
-------------

[](#composerjson)

```
"require": {
    "xj/yii2-hoverzoom-widget": "*"
},
```

In View
-------

[](#in-view)

```
use xj\hoverzoom\HoverzoomAsset;
HoverzoomAsset::register($this);
```

CSS
---

[](#css)

```
.zoom {
    width:293px;
    height:170px;
    display:block;
    position:relative;
    overflow:hidden;
    border:1px solid #ddd;
    background:#fff url(../images/hoverzoom/loader.gif) no-repeat center;
}
.zoom img { display:none }
.zoomOverlay {
    position:absolute;
    top:0; left:0;
    bottom:0; right:0;
    display:none;
    background-image:url(../images/hoverzoom/zoom.png);
    background-repeat:no-repeat;
    background-position:center;
}
```

HTML
----

[](#html)

```