/* 메뉴 리스트 */
.menu-con {
margin-top: 60px;
border-top: 2px solid #333;
}
메뉴 전체 컨테이너의 스타일이다
상단 여백을 추가하고 border-top 2px로 실선을 추가한다.
.menu-board-list {
margin: 60px 0 0 -29px;
}
.menu-board-list:after {
content: '';
display: block;
clear: both;
}
.menu-board-list li {
float: left;
position: relative;
width: 340px;
height: 410px;
margin: 0 0 60px 0;
padding-left: 29px;
}
.menu-board-list li .img {
position: relative;
width: 340px;
height: 340px;
background-color: #fafafa;
overflow: hidden;
z-index: 1;
}
.menu-board-list li .img img {
position: relative;
transition: transform 0.5s ease;
z-index: -1;
}
.menu-board-list li .img:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(84, 98, 32, 0.95);
opacity: 0;
border-radius: 30px;
transition: all 0.45s ease;
}
.menu-board-list li:hover .img img {
transform: scale(1.1);
}
.menu-board-list li:hover .img:after {
content: '';
display: block;
position: absolute;
top: -170px;
left: -170px;
width: 200%;
height: 180%;
background-color: rgba(94, 140, 36, 0.90);
opacity: 1;
border-radius: 170px;
transition: all 0.45s ease;
}
.menu-board-list li:hover.tackout .img img {
transform: scale(1);
}
.menu-board-list li:hover.tackout .img:after {
background-color: rgba(94, 140, 36, 0);
opacity: 0;
}
.menu-board-list .icon {
display: block;
position: absolute;
top: 20px;
left: 50px;
height: 200px;
z-index: 2;
opacity: 1;
}
.menu-board-list .icon span {
display: block;
position: relative;
width: 40px;
height: 40px;
margin-bottom: 4px;
font-size: 0;
opacity: 1;
}
.menu-board-list li:hover .icon {
opacity: 0;
transition: all 0.45s ease;
}
.menu-board-list .info {
display: block;
position: absolute;
top: 76px;
left: 29px;
width: 340px;
text-align: center;
z-index: 2;
opacity: 0;
letter-spacing: -0.02em;
transition: all 0.45s ease;
}
.menu-board-list .info:after {
content: '';
display: block;
position: absolute;
top: 185px;
left: 170px;
width: 0%;
height: 2px;
background-color: #fff;
transition: all 0.45s ease-in-out;
}
.menu-board-list .info:before {
content: '';
display: block;
position: absolute;
top: 167px;
left: 50%;
width: 2px;
height: 38px;
margin-left: -1px;
background-color: #fff;
transition: all 0.45s ease;
}
.menu-board-list .info .ko-name {
margin-top: -5px;
color: #fff;
font-size: 26px;
font-weight: 500;
transition: all 0.45s ease;
}
.menu-board-list .info .en-name {
margin-top: -10px;
color: #e9c156;
font-size: 17px;
transition: all 0.45s ease;
}
.menu-board-list .info .txt {
margin-top: 40px;
padding: 0 20px;
color: #fff;
font-size: 17px;
line-height: 28px;
opacity: 0.8;
transition: all 0.45s ease;
}
.menu-board-list li:hover .info {
display: block;
position: absolute;
top: 76px;
left: 29px;
width: 340px;
text-align: center;
z-index: 2;
opacity: 1;
letter-spacing: -0.02em;
transition: all 0.45s ease;
}
.menu-board-list li:hover .info:after {
content: '';
display: block;
position: absolute;
top: 185px;
left: 151px;
width: 38px;
height: 2px;
background-color: #fff;
transition: all 0.45s ease-in-out;
}
.menu-board-list li:hover .info:before {
content: '';
display: block;
position: absolute;
top: 167px;
left: 50%;
width: 2px;
height: 38px;
margin-left: -1px;
background-color: #fff;
transition: all 0.45s ease;
}
.menu-board-list li:hover .info .ko-name {
margin-top: 0;
color: #fff;
font-size: 23px;
font-weight: 500;
transition: all 0.45s ease;
}
.menu-board-list li:hover .info .en-name {
margin-top: 0;
color: #e9c156;
font-size: 15px;
transition: all 0.45s ease;
}
.menu-board-list li:hover .info .txt {
margin-top: 23px;
padding: 0 20px;
color: #fff;
font-size: 17px;
line-height: 28px;
opacity: 0.8;
transition: all 0.45s ease;
}
.menu-board-list .name {
padding-top: 15px;
text-align: center;
}
.menu-board-list .name .ko-name {
color: #222;
font-size: 21px;
font-weight: 500;
}
.menu-board-list .name .en-name {
color: #999;
font-size: 15px;
}
<div class="menu-con">
<ul class="menu-board-list">
<li>
<div class="img">
<img src="path/to/your-image.jpg" alt="메뉴 이미지">
</div>
<div class="icon">
<span class="best"></span>
<span class="new"></span>
<span class="hot"></span>
</div>
<div class="info">
<div class="ko-name">제육 볶음</div>
<div class="en-name">Menu Name</div>
<div class="txt">메뉴에 대한 간단한 설명이 들어갑니다.</div>
</div>
<div class="name">
<div class="ko-name">제육볶음</div>
<div class="en-name">Menu Name</div>
</div>
</li>
</ul>