728x90
hover 사용해서 마우스를 이미지에 올렸을 때
가격하고 제목 띄우도록 만들기.
/* 정사각형 */
.square-flex {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.square {
position: relative;
width: 375px;
height: 375px;
border: 1px solid $main_color;
margin: 20px;
overflow: hidden;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
&:hover .overlay-wrap {
background-color: rgba(0, 0, 0, 0.6);
opacity: 1;
}
}
.overlay-wrap {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
opacity: 0;
.overlay {
font-size: 1.3rem;
font-weight: bold;
color: white;
}
}
}
투명도를 0 으로 만들었다가
마우스 hover 을 하면 투명도 1 로 만들어서 보이게끔 만듦.
728x90
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[CSS] 이미지 수정하기 ( object-fit: cover; ) (0) | 2024.08.26 |
---|---|
[CSS] 검색창 만들기 (4) | 2024.08.26 |
[Ajax] 맥도날드에다가 데이터 넣기 (0) | 2024.08.24 |
[깃] 맥도날드 데이터 깃허브에 넣기 (0) | 2024.08.24 |
[SCSS] scss 수정 및 캐러셀 수정 (0) | 2024.08.24 |