DigiPen Institute of Technology

:root { --slow-speed: 0.5s; --normal-speed: 0.35s; --fast-speed: 0.15s; --easy-ease: cubic-bezier(0.25,0,0.1,1); } .panel-container { display: block; position: absolute; top: 0; left: -4vw; width: 100vw; height: 100%; } .panel{ position: absolute; display:flex; justify-content: center; overflow:hidden; width:100%; height:25%; background-size:cover; top:0; -webkit-transition: transform var(--normal-speed) ease; -moz-transition: transform var(--normal-speed) ease; -o-transition: transform var(--normal-speed) ease; transition: transform var(--normal-speed) ease; } .panel .background-img{ height: 120%; width: 200%; top:-10%; left:-50%; position: absolute; display: block; background-position: center; background-size: cover; -webkit-transition: transform var(--normal-speed) ease; -moz-transition: transform var(--normal-speed) ease; -o-transition: transform var(--normal-speed) ease; transition: transform var(--normal-speed) ease; } .panel .background-img::after { content: ''; display: block; height: 100%; width: 100%; } .panel:nth-of-type(1) { top:0; } .panel:nth-of-type(1) .background-img{ background-image:url(/sites/default/files/public/img/home/05-body/digipen-student-digital-painting-by-amy-kim_im.jpg); } .panel .background-img::after { background-image: linear-gradient(45deg, rgba(35,31,32,0.9), rgba(35,31,32,0.5)); opacity: 0.5; -webkit-transition: opacity var(--normal-speed) ease; -moz-transition: opacity var(--normal-speed) ease; -o-transition: opacity var(--normal-speed) ease; transition: opacity var(--normal-speed) ease; } .panel:nth-of-type(2){ top:25%; } .panel:nth-of-type(2) .background-img{ background-image:url(/sites/default/files/public/img/home/01-hero/digipen-student-digital-painting-andreipaul-elenza.jpg); } .panel:nth-of-type(3) { top:50%; } .panel:nth-of-type(3) .background-img{ background-image:url(/sites/default/files/public/img/home/05-body/digipen-student-concept-art-from-animation-circuitron.jpg); } .panel:nth-of-type(4) { top:75%; } .panel:nth-of-type(4) .background-img{ background-image:url(/sites/default/files/public/img/home/01-hero/digipen-student-art-by-kallie-king.jpg); } .panel .content{ z-index: 30; width: 80%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction:column; text-align:center; -webkit-transform: translateY(-0.5rem); transform: translateY(-0.5rem); } .panel-heading { width: 30%; -webkit-transition: transform var(--normal-speed) ease; -moz-transition: transform var(--normal-speed) ease; -o-transition: transform var(--normal-speed) ease; transition: transform var(--normal-speed) ease; } .panel-summary { display: flex; flex-direction: column; -webkit-transition: transform var(--normal-speed) ease, opacity var(--normal-speed) ease; -moz-transition: transform var(--normal-speed) ease, opacity var(--normal-speed) ease; -o-transition: transform var(--normal-speed) ease, opacity var(--normal-speed) ease; transition: transform var(--normal-speed) ease, opacity var(--normal-speed) ease; } .panel-summary p:nth-of-type(2){ display: flex; justify-content: center; } .panel-summary p:nth-of-type(2) strong{ position: absolute; } .panel-summary p:nth-of-type(2) strong::after{ content: ''; display: inline-block; position: relative; width: 0%; height: 2px; background: #e6474a; -webkit-transform: translateY(-0.75rem); transform: translateY(-0.75rem); -webkit-animation: underlineReset var(--normal-speed) var(--easy-ease) both; animation-name: underlineReset; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .panel:hover .panel-summary p:nth-of-type(2) strong::after, .panel:focus .panel-summary p:nth-of-type(2) strong::after{ -webkit-animation: underlineHover var(--normal-speed) var(--easy-ease) both; animation-name: underlineHover; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .panel:hover .background-img, .panel:focus .background-img{ -webkit-transform: scale(0.85); transform: scale(0.85); } .panel:hover .background-img::after, .panel:focus .background-img::after{ opacity: 1; } @-webkit-keyframes underlineReset { from { width: 100%; } } @keyframes underlineReset { from { width: 100%; } } @-webkit-keyframes underlineHover { to { width: 100%; } } @keyframes underlineHover { to { width: 100%; } } @media screen and (min-width: 30em){ .panel{ width:50%; height:50%; } .panel-heading { width: 60%; } .panel:nth-of-type(2){ top:0; left:50%; } .panel:nth-of-type(3){ left:0; top: 50% } .panel:nth-of-type(4){ left:50%; top:50%; } } @media screen and (min-width: 54em){ .panel-container { left: -5vw; } } @media screen and (min-width: 68em){ .panel-container { left: -8vw; } .panel{ top:0 !important; width:25%; height:100%; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); } .panel-heading { width: 9rem; } .panel-summary{ position: absolute; width: 90%; justify-content: center; opacity: 0; } .panel-summary p:nth-of-type(2) strong{ font-size: 0.75rem; } .panel-summary p:nth-of-type(2) strong::after{ -webkit-transform: translateY(-0.5rem); transform: translateY(-0.5rem); } .panel:nth-of-type(1) { left:-5%; width:30%; } .panel:nth-of-type(1) .background-img{ background-image:url(/sites/default/files/public/img/home/05-body/digipen-student-digital-painting-by-amy-kim.jpg); } .panel:nth-of-type(2){ left:25%; } .panel:nth-of-type(2) .background-img{ background-position: 60%; } .panel:nth-of-type(3){ left:50%; } .panel:nth-of-type(4){ left:75%; width:30%; } .panel:nth-of-type(4) .background-img{ background-position: 90%; } .panel .background-img{ height: 110%; top:-5%; -webkit-transform: skewX(10deg); transform: skewX(10deg); } .panel .background-img::after { background-image: linear-gradient(45deg, rgba(35,31,32,0.75), rgba(35,31,32,0.25)); opacity: 0.4; } .panel .content{ align-content: center; -webkit-transform: skewX(10deg) translateX(-0.25rem); transform: skewX(10deg) translateX(-0.25rem); } .panel:first-of-type .content{ -webkit-transform: skewX(10deg) translateX(10%); transform: skewX(10deg) translateX(10%); } .panel:last-of-type .content{ -webkit-transform: skewX(10deg) translateX(-10%); transform: skewX(10deg) translateX(-10%); } .panel:hover, .panel:focus{ -webkit-transform: scale(1.1) skewX(-10deg); transform: scale(1.1) skewX(-10deg); } .panel:hover .background-img, .panel:focus .background-img{ -webkit-transform: scale(0.85) skewX(10deg); transform: scale(0.85) skewX(10deg); } .panel:hover .panel-heading, .panel:focus .panel-heading{ -webkit-transform: translateY(-1.5rem); transform: translateY(-1.5rem); } .panel:hover:nth-of-type(2) .panel-heading, .panel:focus:nth-of-type(2) .panel-heading, .panel:hover:nth-of-type(3) .panel-heading, .panel:focus:nth-of-type(3) .panel-heading{ -webkit-transform: translateY(-2rem); transform: translateY(-2rem); } .panel:hover .panel-summary, .panel:focus .panel-summary{ -webkit-transform: translateY(1.5rem); transform: translateY(1.5rem); opacity: 1; } .panel:hover .panel-summary p:nth-of-type(2) strong::after, .panel:focus .panel-summary p:nth-of-type(2) strong::after{ -webkit-animation-delay: var(--fast-speed); animation-delay: var(--fast-speed); } } @media screen and (min-width: 85em){ .panel-container { left: calc((-100vw + 72rem) / 2); } } @media screen and (min-width: 90em){ .panel:nth-of-type(4) .background-img{ background-position: 100%; } .panel-summary{ width: 20rem; } .panel:hover:nth-of-type(2) .panel-heading, .panel:focus:nth-of-type(2) .panel-heading, .panel:hover:nth-of-type(3) .panel-heading, .panel:focus:nth-of-type(3) .panel-heading{ -webkit-transform: translateY(-1.5rem); transform: translateY(-1.5rem); } }