Skip to main content
Back to top
.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.

Our Students Are Amazing

Student Showcase
  • 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
An image of DigiPen's viewbook

Learn More

Stay in the Loop

Don’t miss any updates and get access to our digital viewbook!

Don’t miss any updates and get access to our digital viewbook!