JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="wrap">	
	<div class="box-contents">
		<ul class="item-list calc">
			<li class="item">
				<a href="#">
					<dl class="item-info">
						<dt>단쿠가</dt>
						<dd>아이요 Faraway~와타시오 츠레테 Faraway~</dd>
					</dl>
					<img src="http://www.rarepanda.co.kr/shopimages/jsasmsk/0110110000162.jpg" alt="" />
				</a>
				<button class="btn-base btn-like"><span class="icon"><span class="txt">Like</span></span></button>
				<button class="btn-base btn-add-cart"><span class="icon">Cart</span></button>
			</li>
			<li class="item">
				<a href="#">
					<dl class="item-info">
						<dt>123</dt>
						<dd>123</dd>
					</dl>
					<img src="http://cfile30.uf.tistory.com/image/2662233958D28BDC0F4EEF" alt="" />
				</a>
				<button class="btn-base btn-like"><span class="icon"><span class="txt">Like</span></span></button>
				<button class="btn-base btn-add-cart"><span class="icon">Cart</span></button>
			</li>
			<li class="item">
				<a href="#">
					<dl class="item-info">
						<dt>사이버스타</dt>
						<dd>열풍, 암운을 가르고 저편으로 내 마음을 날린다. 열풍! 질풍! 사이버스타.</dd>
					</dl>
					<img src="http://link.webhard.co.kr/img/HDC_IDGUNDAMALL_FD2015031210156682489cb0c" alt="" />
				</a>
				<button class="btn-base btn-like"><span class="icon"><span class="txt">Like</span></span></button>
				<button class="btn-base btn-add-cart"><span class="icon">Cart</span></button>				
			</li>
			<li class="item">
				<a href="#">
					<dl class="item-info">
						<dt>발시오네</dt>
						<dd>원월살법</dd>
					</dl>
					<img src="https://i.ytimg.com/vi/DwMfJF9NWzk/maxresdefault.jpg" alt="" />
				</a>
				<button class="btn-base btn-like"><span class="icon"><span class="txt">Like</span></span></button>
				<button class="btn-base btn-add-cart"><span class="icon">Cart</span></button>	
			</li>
			<li class="item">
				<a href="#">
					<dl class="item-info">
						<dt>바이스릿터</dt>
						<dd>엑셀렌 누님~</dd>
					</dl>
					<img src="http://cfile22.uf.tistory.com/image/1852991749BC79E75A81AA" alt=""...

CSS

*{margin:0;padding:0;list-style:none;color:#333;}
img{vertical-align:top;border:0;}
html,body{height:100%;font:14px/1.5 'malgun gothic', 'Dotum', sans-serif;background:#333;}
button{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: none;
	border: 0;
	color: inherit;
	/* cursor: default; */
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	-webkit-appearance: button; /* for input */
	-webkit-user-select: none; /* for button */
	-moz-user-select: none;
	-ms-user-select: none;
}

.box-contents{padding:30px;}
.item-list{}
.item-list > li{position:relative;overflow:hidden;float:left;height:300px;border:1px solid #ffcc00;box-sizing:border-box;}
.item-list > li > a{position:relative;z-index:10;display:block;}
.item-list > li .item-info{position:absolute;top:20px;left:20px;right:20px;z-index:5;}
.item-list > li .item-info dt{float:left;font-weight:bold;font-size:24px;margin:0 5px 5px 0;padding:5px;background:#666;background-color:rgba(0, 0, 0, 0.5);color:#fff;}
.item-list > li .item-info dd{float:left;background:#666;padding:5px;background-color:rgba(0, 0, 0, 0.5);color:#fff;}
.item-list > li .item-info dt,.item-list > li .item-info dd{min-height:28px;line-height:24px;}
.item-list > li .btn-base{opacity:0;position:absolute;bottom:20px;left:20px;z-index:10;}
.item-list > li .btn-base.btn-like{transform:rotateY(0deg) scale(1);-webkit-transform:rotateY(0deg) scale(1);}
.item-list > li .btn-base.btn-like .txt{position:absolute;top:0px;left:0px;z-index:2;width:100%;text-align:center;line-height:32px;color:#fff;}
.item-list > li .btn-add-cart{position:absolute;left:auto;right:20px;}
.item-list > li:hover .btn-base{opacity:1;}
.item-list > li:hover .btn-base.btn-like,
.item-list > li:hover .btn-base.btn-like .txt{animation:spin 0.5s;}
@keyframes spin {
    0%{transform:rotateY(0deg) scale(0);-webkit-transform:rotateY(0deg) scale(0);}
	100%{transform:rotateY(180deg)...

JavaScript

var	_itemList = $('.item-list'),
			_item = _itemList.find('.item'),
			_itemAnchor = _item.find('a'),
			_pad = 10,
			_itemPos = 5,
			_itemSpe = 300,
			_itemOpa = 0.5;

	_item.on('mouseenter focus', function(e){
		var	_pegeX = e.pageX,
				_pegeY = e.pageY,
				_this = $(this);
				_thisw = _this.width(),
				_thish = _this.height(),				
				_thisOft = _this.offset(),
				_itemOftL = _pegeX - _thisOft.left,
				_itemOftT = _pegeY - _thisOft.top,
				_dimm = _this.find('.item-dimm');

		console.log('너비' + ':' + _thisw);

		if(_dimm.length>0){
			var _itemDimm = _this.find('.item-dimm');
			_itemDimm.stop().animate({
				top: _itemPos,
				left: _itemPos,
				opacity:_itemOpa,
			}, _itemSpe);
		}else{
			_this.find('a').append('<span class="item-dimm"></span>');
			var _itemDimm = _this.find('.item-dimm');
			_itemDimm.css({
				width:_thisw-_pad,
				height:_thish-_pad,
				top: _itemOftT-(_thish/2),
				left: _itemOftL-(_thisw/2),
			});
			_itemDimm.stop().animate({
				top: _itemPos,
				left: _itemPos,
				opacity:_itemOpa,
			}, _itemSpe);
		}
	});	

	_item.on('mouseleave blur', function(e){
		var	_pegeX = e.pageX,
				_pegeY = e.pageY,		
				_this = $(this);
				_thisw = _this.width(),
				_thish = _this.height(),				
				_thisOft = _this.offset(),
				_itemOftL = _pegeX - _thisOft.left,
				_itemOftT = _pegeY - _thisOft.top;

		var _itemDimm =_this.find('.item-dimm');

		_itemDimm.stop().animate({
			top: _itemOftT-(_thish/2),
			left: _itemOftL-(_thisw/2),
			opacity:0,
		}, _itemSpe, function(){
			_this.find('.item-dimm').remove();
		});
	});