Scolmore Hover Animation

hover-triangle-animation.html

<div class="homepage-content-1 espHoverZoom ehzRight">
	<div class="ehzSlant">
		<div class="ehzContent">
			HTML HERE
		</div>
	<div>
</div>

scolmore-hover-animation.markdown

Scolmore Hover Animation

A Pen by Richard Leishman on CodePen.

License.

script.js

(function($) {
	
	$.fn.espHoverZoom = function() {
		var elem = this;
		
		ehzResize(elem);
		$(window).resize(ehzResize(elem));
		
		//var size = getSmallestSize(elem);
		
		elem.on('mouseover', function(e) {
			moveSlant(this, 1);
		});
		
		elem.on('mouseout', function(e) {
			moveSlant(this, 0);
		});
		
		function moveSlant(elem, on) {
			if (on==1) var attr = 'slantOn';
			else var attr = 'slantOff';
			
			if (on==1) var bgSize = '110';
			else var bgSize = '100';
			
			$(elem).children('.ehzSlant').css('margin-left', $(elem).data(attr)+'px');
			$(elem).css('background-size', bgSize+'%');
		}
		
		
		
		function getSmallestSize(elem) {
			if ($(elem).height() > $(elem).width()) return $(elem).width();
				else return $(elem).height();
		}
		
		function ehzResize(elem) {
			elem.each(function(e) {
				
				var size = getSmallestSize(this);
				
				if ($(this).hasClass('ehzLeft')) {
					var slantOff = size*-1;
					var slantOn = 0;
				} else {
					var slantOff = $(this).width();
					var slantOn = $(this).width()-size;
				}
				
				$(this).data('slant-off', slantOff);
				$(this).data('slant-on', slantOn);
				$(this).data('slant-size', size);
				
				$(this).children('.ehzSlant')
					.css('border-top-width', size)
					.css('border-right-width', size)
					.css('border-bottom-width', size)
					.css('border-left-width', size)
					.css('margin-left', size)
					.children('.ehzContent')
					.width(size)
					// .height(size);
				
				if ($(this).hasClass('ehzLeft')) {
					$(this).find('.ehzContent')
						.height(size)
						.css('bottom', '0');
				} else {
					$(this).find('.ehzContent')
						.height(null)
						.css('bottom', (size*-1)+'px');
				}
	
					moveSlant(this, 0);
			});
			
		};
	}
	
	$('.espHoverZoom').espHoverZoom();
	
})(jQuery);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.scss

.espHoverZoom {
	position: relative;
	overflow: hidden;
	
	-webkit-transition: background-size .3s ease-in-out;
		-moz-transition: background-size .3s ease-in-out;
		-o-transition: background-size .3s ease-in-out;
		transition: background-size .3s ease-in-out;
	background-position: center center;
	
	.ehzSlant {
		opacity: 0.8;
	  
		-webkit-transition: margin-left .3s ease-in-out;
		-moz-transition: margin-left .3s ease-in-out;
		-o-transition: margin-left .3s ease-in-out;
		transition: margin-left .3s ease-in-out;
		position: absolute;
	
		.ehzContent { 
			position: absolute;
		}
	}
	
	&.ehzLeft .ehzSlant {
			border-top: solid #95A3AB;
			border-right: solid transparent;
			margin-left: -9999px;
			top: 0;
			.ehzContent { 
				text-align: left;
				bottom: 0px;
			}
		}
		
		&.ehzRight .ehzSlant {
			border-bottom: solid #95A3AB;
			border-left: solid transparent;
			margin-left: 9999px;
			bottom: 0;
			.ehzContent { 
				text-align: right;
				right: 0;
			}
		}
}




.homepage-content-1 {
    background-image: url(http://devfwd.com/espuk/marketing/_images/homepage/background_1.png);
    background-size: 100%;
    /* background: #dfe2e2; */
    height: 350px;
    width: 332px;
    display: inline-block;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />