.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%;
}
.panel-summary { display: flex; flex-direction: column;
}
.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; -webkit-animation: animateRevert var(--normal-speed) var(--easy-ease) both; animation-name: animateRevert; animation-duration: 0ms; animation-timing-function: var(--ease-ease); animation-fill-mode: both; --animation-translate-x: 0; --animation-translate-y: 1.5rem; } html.cssanimations .section-animation-ready .panel-heading{ -webkit-animation-duration: var(--normal-speed); animation-duration: var(--normal-speed); } .panel-summary{ width: 90%; min-height: 6rem; -webkit-animation: animateRevert var(--normal-speed) var(--easy-ease) both; animation-name: animateRevert; animation-duration: 0ms; animation-timing-function: var(--ease-ease); animation-fill-mode: both; --animation-opacity: 0; --animation-translate-x: 0; --animation-translate-y: -2rem; } html.cssanimations .section-animation-ready .panel-summary{ -webkit-animation-duration: var(--normal-speed); animation-duration: var(--normal-speed); } .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-animation: animate var(--normal-speed) var(--easy-ease) both; animation-name: animate; } .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-heading, .panel:focus .panel-heading{ -webkit-animation: animate var(--normal-speed) var(--easy-ease) both; animation-name: animate; } .panel:hover .panel-summary, .panel:focus .panel-summary{ -webkit-animation: animate var(--normal-speed) var(--easy-ease) both; animation-name: animate; } .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); }
}
var readyAnimation = document.getElementById ("ready-animation");
if (readyAnimation) { setTimeout(function() { readyAnimation.classList.add ("section-animation-ready"); }, 300);
}
New on Campus
Students
Watch the 2024 Student Game Showcase
Check out all the original games and projects that DigiPen student teams spent the year collaborating on.
Students
Class Select: Students Give NPCs a Piece of Their Mind in CS 380 Artificial Intelligence For Games
Instructor Steve Rabin teaches students the secrets that give game characters agency, personalities, and prowess in battle.
Ranked Top 50
Ranked as one of the Top 50 Creative Schools in the Rookies Global School Rankings for 2023.
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