편집토론문서 역사

틀:와르샤와/styles.css: 두 판 사이의 차이

< 틀:와르샤와
(내용을 ".IM_POG-Section1 { background: rgba(40,40,0,0); transition: background 1s; } .IM_POG-Section1a { width:calc(100% - 100px); transition: width 1s; } .IM_POG-Sec..."(으)로 바꿈)
태그: 대체됨
편집 요약 없음
4번째 줄: 4번째 줄:
}
}
.IM_POG-Section1a {
.IM_POG-Section1a {
     width:calc(100% - 100px);
     transform: translateX(55%);
transition: width 1s;
transition: transform 1s;
}
}
.IM_POG-Section1b {
.IM_POG-Section1b {
     display:inline-block;
     display:inline-block;
     overflow:hidden;
     overflow:hidden;
     width:0%;
     transform: translateX(0%);
     height:0px;
     height:0px;
     opacity:0;
     opacity:0;
transition:opacity 1s, width 1s, height 1s;
transition:opacity 1s, transform 1s, height 1s;
}
}
.IM_POG-Section1:hover > .IM_POG-Section1a {
.IM_POG-Section1:hover > .IM_POG-Section1a {
     width:calc(45% - 100px);
     transform: translateX(0%);
}
}
.IM_POG-Section1:hover > .IM_POG-Section1b {
.IM_POG-Section1:hover > .IM_POG-Section1b {
     width:45%;
     transform: translateX(0%);
     height:max-content;
     height:max-content;
     opacity:1;
     opacity:1;
}
}
.IM_POG-Section1:hover {
.IM_POG-Section1:hover {
     background: rgba(40,40,0,0.5);
     background: rgba(0, 0, 0, 0.7);
}
}

2023년 12월 30일 (토) 12:48 판

.IM_POG-Section1 {
    background: rgba(40,40,0,0);
	transition: background 1s;
}
.IM_POG-Section1a {
    transform: translateX(55%);
	transition: transform 1s;
}
.IM_POG-Section1b {
    display:inline-block;
    overflow:hidden;
    transform: translateX(0%);
    height:0px;
    opacity:0;
	transition:opacity 1s, transform 1s, height 1s;
}
.IM_POG-Section1:hover > .IM_POG-Section1a {
    transform: translateX(0%);
}
.IM_POG-Section1:hover > .IM_POG-Section1b {
    transform: translateX(0%);
    height:max-content;
    opacity:1;
}
.IM_POG-Section1:hover {
    background: rgba(0, 0, 0, 0.7);
}