JSFiddle - React, Tailwind, and code Playground

by magnix2k

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
	<head>
		<meta charset="UTF-8" />
			</head>
	<body class="bodyclass">
		
		
    
    <div class="test-imgplace">
      <img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
		<div class="card-hover">
			<div class="card">
				<div class="card-content">
					<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
					
				</div>
			</div>
      </div>
    </div>
		</div>
	</body>

</html>

CSS

.card .image{
	height: 275px;
  width: 183px;
    background-size: cover;
    background-position: center center;
}
.imgtest {
  position: absolute;
  z-index: 1;
  text-align: center;
  top: 0;
  left: 100px;
  border: solid 1px;
}
.test-imgplace {
   margin: 0 auto;
  position: relative;
   overflow: hidden;
}
.card .text{
    
    height: 20%;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 50px;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}
.card{
	width: 183px;
    height: 275px;
    margin: auto auto;
    background: #383030;
    border-radius: 5px;
    overflow: hidden;
	text-align: center;

}
.card-content{
	transform-style: preserve-3d;
	
}
body{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.hover-in{
	transition: .3s ease-out;
}
.hover-out{
	transition: .3s ease-in;
}
.card-hover{
	margin:0;
}

JavaScript

!function(e){e.fn.hover3d=function(t){var r=e.extend({selector:null,perspective:1e3,sensitivity:10,invert:!1,shine:!1,hoverInClass:"hover-in",hoverOutClass:"hover-out",hoverClass:"hover-3d"},t);return this.each(function(){function t(e){i.addClass(r.hoverInClass+" "+r.hoverClass),currentX=currentY=0,setTimeout(function(){i.removeClass(r.hoverInClass)},1e3)}function s(e){var t=i.innerWidth(),s=i.innerHeight(),n=Math.round(e.pageX-i.offset().left),o=Math.round(e.pageY-i.offset().top),v=r.invert?(t/2-n)/r.sensitivity:-(t/2-n)/r.sensitivity,c=r.invert?-(s/2-o)/r.sensitivity:(s/2-o)/r.sensitivity,u=n-t/2,p=o-s/2,f=180*Math.atan2(p,u)/Math.PI-90;f<0&&(f+=360),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d",transform:"rotateY("+v+"deg) rotateX("+c+"deg)"}),a.css("background","linear-gradient("+f+"deg, rgba(255,255,255,"+e.offsetY/s*.1+") 0%,rgba(255,255,255,0) 80%)")}function n(){i.addClass(r.hoverOutClass+" "+r.hoverClass),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d",transform:"rotateX(0) rotateY(0)"}),setTimeout(function(){i.removeClass(r.hoverOutClass+" "+r.hoverClass),currentX=currentY=0},1e3)}var o=e(this),i=o.find(r.selector);currentX=0,currentY=0,r.shine&&i.append('<div class="shine"></div>');var a=e(this).find(".shine");o.css({perspective:r.perspective+"px",transformStyle:"preserve-3d"}),i.css({perspective:r.perspective+"px",transformStyle:"preserve-3d"}),a.css({position:"absolute",top:0,left:0,bottom:0,right:0,transform:"translateZ(1px)","z-index":9}),o.on("mouseenter",function(){return t()}),o.on("mousemove",function(e){return s(e)}),o.on("mouseleave",function(){return n()})})}}(jQuery);

$(document).ready(function() {
  $(".card-hover").hover3d({
    selector: ".card",
    shine: true,
    sensitivity: 50,
    perspective: 50
  });
});