.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); }
}
New on Campus
Industry
Where to Catch DigiPen Faculty, Students, and Alumni at GDC 2024
There be Dragons at this year’s Game Developers Conference in San Francisco. Here’s where to see them.
Alumni
Meet Anthony Saulls, Captain of Deep Face Exploration on Bethesda’s Starfield
Discover how one DigiPen computer science graduate gave a galaxy of characters their faces.
Ranked Top 5
The Princeton Review ranked DigiPen a Top 5 Game Design School for the last 14 years.
514 Selections
Student films from DigiPen's three global campuses have earned 514 awards and festival selections.
2,000+ Games
DigiPen alumni have helped ship more than 2,000 commercial game titles, including some of the most popular video games of all time.
313 Awards
Students from DigiPen's three global campuses have won 313 awards for game projects and academic papers.
Do What You Love. Love What You Do.
We prepare students for a wide range of careers — doing the kind of work that challenges the mind and excites the imagination. Check out some examples of what our alumni have gone on to do after DigiPen.
Alumni Success