PLP Image Hover: Show Secondary Image Extenstion

Jira Code: Wf-7: Add alternative photo to pictures on product category so a second picture shows when user scrolls over picture

Create an alternative photo on product list page to show when the mouse hovers over the image.

Create a custom field in the item record and use that field for displaying as the hover image.

For this we have extended the facet.item.cell.view and facet grid, list and table template

//JS
 _.extend(FacetsItemCellView.prototype, {
                        getContext: _.wrap(FacetsItemCellView.prototype.getContext, function(fn) {
                            var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
                            try {
                                var item_images_detail = this.model.get('itemimages_detail') || {};
                                originalRet.hasHoverImage = false;

                                var images = Utils.imageFlatten(item_images_detail);
                                if (images.length >= 2) {
                                    originalRet.hoverImage = images[1];
                                    originalRet.hasHoverImage = true;
                                }
                                return originalRet;
                            } catch (e) {
                                console.log('err@FacetsItemCellView', e);
                                return originalRet;
                            }
                        })
                    });

<div class="facets-item-cell-grid" data-type="item" data-item-id="{{itemId}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" data-track-productlist-list="{{track_productlist_list}}" data-track-productlist-category="{{track_productlist_category}}" data-track-productlist-position="{{track_productlist_position}}" data-sku="{{sku}}">
	<meta itemprop="url" content="{{url}}"/>

	<div class="facets-item-cell-grid-image-wrapper">
		{{#if hasHoverImage}}
		<a class="facets-item-cell-grid-link-image img-swap" href="{{url}}">
			<img class="facets-item-cell-grid-image" src="{{resizeImage thumbnail.url 'main'}}" alt="{{thumbnail.altimagetext}}" itemprop="image"/>
			<img class="facets-item-cell-grid-image" src="{{resizeImage hoverImage.url 'main'}}" alt="{{hoverImage.altimagetext}}" itemprop="image"/>
		</a>
		{{else}}
		<a class="facets-item-cell-grid-link-image" href="{{url}}">
			<img class="facets-item-cell-grid-image" src="{{resizeImage thumbnail.url 'main'}}" alt="{{thumbnail.altimagetext}}" itemprop="image"/>
		</a>
		{{/if}}
		{{#if isEnvironmentBrowser}}
			<div class="facets-item-cell-grid-quick-view-wrapper">
				<a href="{{url}}" class="facets-item-cell-grid-quick-view-link" data-toggle="show-in-modal">
					<i class="facets-item-cell-grid-quick-view-icon"></i>
					{{translate 'Quick View'}}
				</a>
			</div>
		{{/if}}
	</div>

	<div class="facets-item-cell-grid-details">
		<a class="facets-item-cell-grid-title" href="{{url}}">
			<span itemprop="name">{{name}}</span>
		</a>

		<div class="facets-item-cell-grid-price" data-view="ItemViews.Price"></div>

		<div data-view="Cart.QuickAddToCart"></div>

		{{#if showRating}}
			<div class="facets-item-cell-grid-rating" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating" data-view="GlobalViews.StarRating"></div>
		{{/if}}

		<div data-view="ItemDetails.Options"></div>

		<div class="facets-item-cell-grid-stock">
			<div data-view="ItemViews.Stock" class="facets-item-cell-grid-stock-message"></div>
		</div>

		<div data-view="StockDescription"></div>
	</div>
</div>

SCSS
.img-swap img:last-child {
    display: none
}

.img-swap:hover img:first-child {
    display: none
}

.img-swap:hover img:last-child {
    display: inline-block
}

//FOR MAKING THE IMAGE FIT TO THE DIV WE CAN USE THE STYLE
object-fit: cover;