Working on Portal is always fun!!!! Have you ever come across a requirement wherein you want to make some changes to widget without cloning it. Here is an example to increase the size of catalog item image on mouse hover in "SC Catalog Item" widget using jQuery and widget dependencies.

1. Create a dependency in "SC Catalog Item" widget named "Image Hover".

2. Create a JS include "Image Hover" which will call a UI script "hover" (code for UI script is in point 3).

3. Now create a UI script named "hover" with below code ( The UI type of script should be All)

testing();

function testing() {

    //$('button[name="submit"]').css('background-color', 'black');
    $('img').mouseover( function() {
    $(this).css("transform", "scale(1.5)");
    });

    $('img').mouseout( function() {
    $(this).css("transform", "scale(1)");
    });

}

4. Final result (The image will zoom out on hover)

Go give it a try and post your comments