Link doesn't work after I added JavaScript

My anchor in the body section doesn’t work after I added JavaScript/jQuery. Any idea how to fix this?

If I disable the JavaScript code, the link will work. So it must be a JavaScript issue. Also, I don’t get any errors.

JS code:

$(".project").hover3d({
  selector: ".project__card",
  shine: true,
});
(function($){
    	
    	$.fn.hover3d = function(options){
    		
    		var settings = $.extend({
    			selector      : null,
    			perspective   : 1000,
    			sensitivity   : 20,
    			invert        : false,
    			shine         : false,
    			hoverInClass  : "hover-in",
    			hoverOutClass : "hover-out",
    			hoverClass    : "hover-3d"
    		}, options);
    		
    		return this.each(function(){
    			
    			var $this = $(this),
    				$card = $this.find(settings.selector);
    				currentX = 0;
    				currentY = 0;
    
    
    			if( settings.shine ){
    				$card.append('<div class="shine"></div>');
    			}
    			var $shine = $(this).find(".shine");
    
    			// Set perspective and transformStyle value
    			// for element and 3d object
    			$this.css({
    				perspective: settings.perspective+"px",
    				transformStyle: "preserve-3d"
    			});
    			
    			$card.css({
    				perspective: settings.perspective+"px",
    				transformStyle: "preserve-3d",
    			});
    
    			$shine.css({
    				position  : "absolute",
    				top       : 0,
    				left      : 0,
    				bottom    : 0,
    				right     : 0,
    				transform : 'translateZ(1px)',
    				"z-index" : 9
    			});
    			
    			// Mouse Enter function, this will add hover-in
    			// Class so when mouse over it will add transition
    			// based on hover-in class
    			function enter(event){
    				$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
    				currentX = currentY = 0;
    				setTimeout(function(){
    					$card.removeClass(settings.hoverInClass);
    				}, 1000);
    			}
    			
    			// Mouse movement Parallax effect
    			function move(event){
    				
    				var w      = $card.innerWidth(),
    					h      = $card.innerHeight(),
    					currentX = Math.round(event.pageX - $card.offset().left),
    					currentY = Math.round(event.pageY - $card.offset().top),
    					ax 	   = settings.invert ?  ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
    					ay     = settings.invert ? -( h / 2 - currentY)/settings.sensitivity :  ( h / 2 - currentY)/settings.sensitivity,
    					dx     = currentX - w / 2,
    					dy     = currentY - h / 2,
    					theta  = Math.atan2(dy, dx),
    					angle  = theta * 180 / Math.PI - 90;
    
    					
    				if (angle < 0) {
    					angle  = angle + 360;
    				}
    				
    
    				$card.css({
    					perspective    : settings.perspective+"px",
    					transformStyle : "preserve-3d",
    					transform      : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
    				});
    
    				$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');
    			}
    			
    			// Mouse leave function, will set the transform
    			// property to 0, and add transition class
    			// for exit animation
    			function leave(){
    				$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
    				$card.css({
    					perspective    : settings.perspective+"px",
    					transformStyle : "preserve-3d",
    					transform      : "rotateX(0) rotateY(0)"
    				});
    				setTimeout( function(){
    					$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
    					currentX = currentY = 0;
    				}, 1000 );
    			}
    			
    			// Mouseenter event binding
    			$this.on( "mouseenter", function(){
    				return enter();
    			});
    			
    			// Mousemove event binding
    			$this.on( "mousemove", function(event){
    				return move(event);
    			});
    			
    			// Mouseleave event binding
    			$this.on( "mouseleave", function(){
    				return leave();
    			});
    			
    		});
    		
    	};
    	
    }(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project__card">
            <a href="https://www.youtube.com/" target="_blank" 
                       class="project__image"><img src="img/1.jpg"></a>
            <div class="project__detail">
              <h2 class="project__title"><a href="https://www.youtube.com/" target="_blank">YOUTUBE</a></h2>
              <small class="project__category"><a href="https://www.youtube.com/" target="_blank">FOUNDER</a></small>
            </div>

Your js code refers to a “.project” selector, but your HTML excerpt fails to show where that project class is. I will assume that your HTML code has an outer wrapper:

<div class="project">
  ...
</div>

Aside from that, anything that’s given the 3d treatment is not capable of being interacted with. That means links cannot work inside of the 3d content.

I recommend that you remove the links, and wrap the whole project__card with a link instead.
https://jsfiddle.net/7becyvf2/

1 Like

Thanks Paul!
It worked.
Appreciate it.