zoom image on mouse over

[raj_plays]

Hi,
My grid has a column that displays images in size 100x100.
On mouse-over on an image(grid cell), I want to zoom the image to size 200x200.
When the mouse moves away, it should get back to 100x100.
How can I achieve this?

songGrid = new Ext.grid.GridPanel({
    store: songDataStore,
    columns: [{
        header: "Title",
        width: 200,
        dataIndex: 'Title',
        sortable: true,
        align: 'left'
    }, {
        header: "HD Image",
        width: 100,
        dataIndex: 'ImageUrl',
        renderer: renderImage,
        align: 'center'
    }]...
});


function renderImage(value, metaData, record, rowIndex, colIndex, store) {
    metaData.attr = 'style="cursor: pointer"';


    return '<img src="' + value + '" width="100" height="100" />';
}

[sword-it]

Hi raj_plays,
I think you should use css's pseduo class- ':hover' on that image. You can do that using following steps:
1. First give a class to the image in the renderer like below:

function renderImage(value, metaData, record, rowIndex, colIndex, store) {
        metaData.attr = 'style="cursor: pointer"';
        return '<img class="imageZoomCls" src="' + value + '" width="100" height="100" />';
}

2. Then just define this class with pseduo class- 'hover' like:

<style type="text/css">
   .imageZoomCls:hover{height:200px;width:200px;}
</style>

[raj_plays]

Thank you, sword-it. It is a great solution.
But it works on IE not on FF.
Any fix for FF?
I tried this but it did not work

div.imageZoomCls:hover{height:200px;width:200px;}

[sword-it]

Hi,
I am wondering why It is not working in Firefox because I tested this solution only in firefox.
One more thing, the code which I provide to u in that I put the 'imageZoomCls' on <img>.
Also I define the hover-css like .imageZoomCls:hover{height:200px;width:200px;}.

But the code that you gave in your last post is - div.imageZoomCls:hover{height:200px;width:200px;}
If we gave a class to <img> then we must not define that class - 'div.imageZoomCls'. It will only apply on div tag with imageZoomCls.

If you want to increase the height/width of <img> on hover then, you should define that class in two ways-

• .imageZoomCls:hover{height:200px;width:200px;} /* generic style*/
• img.imageZoomCls:hover{height:200px;width:200px;} /* specific style, only apply on img*/

[raj_plays]

I got it to work in FF.
I had put a space between ".imageZoomCls:" and "hover" in the style class definition. FF did not like that.
I was experimenting with that class on a div so I used a "div." before the cls.
Thanks again, sword-it for the solution and the explanation.

[gurwinder_singh]

hi

what if we want to do image zoom simply(without grid).

Thanks

[sword-it]

Hi!

you can give a class to your <img> and inside CSS, just use hover ...

<img class="imageZoomCls" src="'your Img Src '" width="100" height="100" />'


CSS:-
.imageZoomCls:hover { height:200px;width:200px;}