|
|
| (같은 사용자의 중간 판 하나는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| /* # 원본: 틀:POgroup/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-Section1b {
| |
| display:inline-block;
| |
| overflow:hidden;
| |
| width:0%;
| |
| height:0px;
| |
| opacity:0;
| |
| transition:opacity 1s, width 1s, height 1s;
| |
| }
| |
| .IM_POG-Section1:hover > .IM_POG-Section1a {
| |
| width:calc(45% - 100px);
| |
| }
| |
| .IM_POG-Section1:hover > .IM_POG-Section1b {
| |
| width:45%;
| |
| height:max-content;
| |
| opacity:1;
| |
| }
| |
| .IM_POG-Section1:hover {
| |
| background: rgba(40,40,0,0.5);
| |
| }
| |
| | |
| .IM_POG-Section2 {
| |
| background: rgba(40,0,0,0);
| |
| transition: background 1s;
| |
| }
| |
| .IM_POG-Section2a {
| |
| width:calc(100% - 100px);
| |
| transition: width 1s;
| |
| }
| |
| .IM_POG-Section2b {
| |
| display:inline-block;
| |
| overflow:hidden;
| |
| width:0%;
| |
| height:0px;
| |
| opacity:0;
| |
| transition:opacity 1s, width 1s, height 1s;
| |
| }
| |
| .IM_POG-Section2:hover > .IM_POG-Section2a {
| |
| width:calc(45% - 100px);
| |
| }
| |
| .IM_POG-Section2:hover > .IM_POG-Section2b {
| |
| width:45%;
| |
| height:max-content;
| |
| opacity:1;
| |
| }
| |
| .IM_POG-Section2:hover {
| |
| background: rgba(40,0,0,0.5);
| |
| }
| |
| | |
| .IM_POG-Section3 {
| |
| background: rgba(0,23,40,0);
| |
| transition: background 1s;
| |
| }
| |
| .IM_POG-Section3a {
| |
| width:calc(100% - 100px);
| |
| transition: width 1s;
| |
| }
| |
| .IM_POG-Section3b {
| |
| display:inline-block;
| |
| overflow:hidden;
| |
| width:0%;
| |
| height:0px;
| |
| opacity:0;
| |
| transition:opacity 1s, width 1s, height 1s;
| |
| }
| |
| .IM_POG-Section3:hover > .IM_POG-Section3a {
| |
| width:calc(45% - 100px);
| |
| }
| |
| .IM_POG-Section3:hover > .IM_POG-Section3b {
| |
| width:45%;
| |
| height:max-content;
| |
| opacity:1;
| |
| }
| |
| .IM_POG-Section3:hover {
| |
| background: rgba(0,23,40,0.5);
| |
| }
| |
| | |
| | |
| | |
| | |
| .IM_POG-MTI1 {
| |
| position: relative;
| |
| overflow:hidden;
| |
| width:50%;
| |
| margin-right:0%;
| |
| z-index:3;
| |
| transition: width 1s, margin 1s;
| |
| }
| |
| .IM_POG-MTI1:hover {
| |
| overflow:hidden;
| |
| width:100%;
| |
| margin-right:-50%;
| |
| }
| |
| .IM_POG-MTI2 {
| |
| position: relative;
| |
| overflow:hidden;
| |
| width:50%;
| |
| margin-right:0%;
| |
| z-index:2;
| |
| transition: width 1s, margin 1s, z-index 1s;
| |
| }
| |
| .IM_POG-MTI2:hover {
| |
| overflow:hidden;
| |
| width:100%;
| |
| margin-left:-50%;
| |
| z-index:5;
| |
| }
| |
| | |
| .IM_POG-MTI {
| |
| filter:brightness(0.5) blur(3px) opacity(15%) grayscale(100%);
| |
| border:none;
| |
| z-index:2;
| |
| box-shadow:0px 0px 5px 2px rgba(0,0,0,0);
| |
| transition: filter 0.5s, box-shadow 1s;
| |
| } | |
| .IM_POG-MTI:hover {
| |
| filter:brightness(0.8) blur(0px) opacity(100%) grayscale(50%);
| |
| z-index:3;
| |
| box-shadow:0px 0px 8px 4px rgba(0,0,0,0.5);
| |
| }
| |
| | |
| .IM_POG-MT1 {
| |
| background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%, rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,1) 5%, rgba(40,40,0,0) 95%), linear-gradient(to right, #282828 0%, #282828 100%);
| |
| transition: background 2s;
| |
| }
| |
| .IM_POG-MT2 {
| |
| background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%, rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to left, rgba(40,0,0,1) 5%, rgba(40,0,0,0) 95%), linear-gradient(to right, #282828 0%, #282828 100%);
| |
| transition: background 2s;
| |
| }
| |
| .IM_POG-MT1:hover {
| |
| background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%, rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,1) 80%, rgba(40,40,0,0.7) 100%), linear-gradient(to right, #282828 0%, #282828 100%);
| |
| }
| |
| .IM_POG-MT1:hover ~ .IM_POG-MT2 {
| |
| background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.15) 10px, rgba(0, 0, 0, 0.05) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.1) 8%, rgba(0, 5, 5, 0.15) 11%, rgba(5, 20, 55, 0.1) 13%, rgba(55, 55, 55, 0.1) 20%, rgba(55, 55, 55, 0.1) 60%, rgba(55, 55, 55, 0.15) 70%, rgba(20, 20, 20, 0.15) 72%, rgba(20, 20, 20, 0.15) 73%, rgba(55, 55, 55, 0.15) 75%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 88%, rgba(10, 10, 10, 0.1) 95%, rgba(55, 55, 55, 0.1) 95%), linear-gradient(to right, rgba(40,40,0,0.7) 0%, rgba(40,0,0,0) 50%), linear-gradient(to right, #282828 0%, #282828 100%);
| |
| } | |