Portfolio hover effects

In this post we discuss how to add hover effects to Portfolio (default) style 1.

Change the image background interactions:

//portfolio item hover effect
 
 ////desktop event 
 if(!$('body').hasClass('mobile') && !navigator.userAgent.match(/(iPad|IEMobile)/)) {
 
 //style 1 & 2
 $('.portfolio-items .col .work-item:not(.style-3)').hover(function(){
 $(this).find('.work-info .vert-center').stop().animate({
 'padding-top' : 15
 },400,'easeOutCubic');
 $(this).find('.work-info, .work-info .vert-center *, .work-info > i').stop().animate({
 'opacity' : 1
 },250,'easeOutCubic');
 //$(this).find('.work-info-bg').stop().animate({
 // 'opacity' : 0.85
 //},250,'easeOutCubic');
 $(this).find('.work-info-bg').stop(true).animate({
 'opacity' : 0
 },350,'swing');
 },function(){
 $(this).find('.work-info .vert-center').stop().animate({ 
 'padding-top' : 0
 },400,'easeOutCubic');
 $(this).find('.work-info, .work-info .vert-center *, .work-info > i').stop().animate({
 'opacity' : 0
 },250,'easeOutCubic');
 $(this).find('.work-info-bg').stop(true).animate({
 'opacity' : 0.45
 },350,'swing');
 });
 
 
 //style 3
 $('.portfolio-items .col .work-item.style-3').hover(function(){
 $(this).find('.work-info .vert-center').stop().animate({
 'top' : '-' + $(this).find('.work-info .vert-center p').height() +'px'
 },350,'easeOutCubic');
 $(this).find('.work-info .vert-center *').stop().animate({
 'opacity' : 1
 },350,'easeOutCubic');
 
 $(this).find('.work-info .vert-center p').stop().animate({
 'margin-top' : '0px',
 'opacity' : 1
 },350,'easeOutCubic');
 
 $(this).find('.work-info-bg').stop(true).animate({
 'opacity' : 0
 },350,'swing');
 },function(){
 $(this).find('.work-info .vert-center').stop().animate({
 'top' : '0'
 },350,'easeOutCubic');
 $(this).find('.work-info .vert-center *').stop().animate({
 'opacity' : 0
 },350,'easeOutCubic');
 
 $(this).find('.work-info .vert-center p').stop().animate({
 'margin-top' : '-'+$(this).find('.work-info .vert-center p').height()*1.5+'px',
 'opacity' : 0
 },350,'easeOutCubic');
 
 $(this).find('.work-info-bg').stop(true).animate({
 'opacity' : 0.45
 },350,'swing');
 });

The ‘pan & zoom’ is handled by a JQuery function ‘Panr’:

/*
 panr - v0.0.1 by Robert Bue (@robert_bue)
 */
 ;(function ( $, window, document, undefined ) {
 // Create the defaults once
 
 var pluginName = "panr",
 defaults = {
 sensitivity: 10,
 moveTarget: "parent",
 scale: false,
 scaleOnHover: false,
 scaleTo: 1.1,
 scaleDuration: .28,
 panY: false,
 panX: false,
 panDuration: 1.25,
 resetPanOnMouseLeave: true,
 onEnter: function(){},
 onLeave: function(){}
 };

Once you’ve set pan-x and pan-y to false then you can start adding the function to ‘portfolio style-1’ image-bg:

//reinit panr
 if(!$('body').hasClass('mobile') && !navigator.userAgent.match(/(Android|iPod|iPhone|iPad|IEMobile|Opera Mini)/)) {
 //$(".portfolio-items.carousel .work-item img").panr({
 $(".portfolio-items.carousel .work-item.style-3 img").panr({
 scaleDuration: .28,
 }); 
 
 }
 if(!$('body').hasClass('mobile') && !navigator.userAgent.match(/(Android|iPod|iPhone|iPad|IEMobile|Opera Mini)/)) {
 //$(".portfolio-items.carousel .work-item img").panr({
 $(".portfolio-items.carousel .work-item img").panr({
 scaleDuration: .28,
 }); 
 
 }

Now update styles.css:

.portfolio-items .col .work-item.style-3 .work-info-bg {
	background-color: #282b30!important;
	opacity: 0.45;
}
.portfolio-items .col .work-item .work-info-bg {
	background-color: #282b30!important;
	opacity: 0.3;
}

The cursor scroll is handled by JQuery Panr by Rob Bue.