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.

About Gary Hicks

Gary Hicks is a professional website and graphics designer with more than 14 years experience. Having worked in London, Mexico City and Tokyo, Japan Gary is now based in Bournemouth and Windsor where he concentrates on work and staying fit.

Leave a Reply

Your email address will not be published.