0418

by Kye Sooryun

HTML

<div id="wrap">
			<ul>
				<li>
					<a href="#">
						<span class="title">제목제목제목제목</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="title">제목제목제목제목</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="title">제목제목제목제목</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="title">제목제목제목제목</span>
					</a>
				</li>
			</ul>
		</div>

CSS

ul {overflow:hidden;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin:0;padding:0;}
			ul li {position:relative;width:calc((100% / 4) - 10px);height:300px;border:1px solid #c71967;text-align:center;transform:perspective(1px) translateZ(0);box-sizing:border-box;list-style:none}

			ul li::after, ul li::before {position:absolute;height:4px;background:#c71967;content:"";z-index:-1;}

			ul li::after {left:100%;right:0;top:0;transition:left 0.3s ease-out;}
			ul li::before {left:0;right:100%;bottom:0;transition:0.6s right 0.3s ease-out;}
			ul li:hover::before {right:0;}
			ul li:hover::after {left:0;}
			

			li a {display:block;width:100%;height:100%;position:relative;transform:perspective(1px) translateZ(0);}
			
			li a::after, li a::before {position:absolute;height:auto;background:#c71967;content:"";}
			li a::after, li a::before {width:4px;}
			li a::after {top:100%;right:0;bottom:0;transition:0.9s top 0.3s ease-out;}
			li a::before {top:0;left:0;bottom:100%;transition:0.3s bottom 0.3s ease-out;}
			li a:hover::after {top:0;}
			li a:hover::before {bottom:0;}

			li span {display:block;position:relative;padding-top:30px;}
			li span.title::after {position:absolute;top:37px;left:50%;display:inline-block;width:50px;height:50px;border:1px solid rgba(0,0,0,0.4);border-radius:50%;content:'';transition:transform 0.5s, opacity 0.3s;transform:translateX(-50%) translateY(-50%) scale(0.2);opacity:0;}
			li span.title:hover::after {opacity:1;transform:translateX(-50%) translateY(-50%) scale(1);}
			li span.title::before {position:absolute;top:37px;left:50%;display:inline-block;width:60px;height:60px;border:3px solid rgba(0,0,0,0.4);border-radius:50%;content:'';transition:transform 0.6s, opacity 0.3s;transform:translateX(-50%) translateY(-50%) scale(0.2);opacity:0;}
			li span.title:hover::before {opacity:1;transform:translateX(-50%) translateY(-50%) scale(1);}