$duration = 450ms
$tileWidth = 250px
$tileHeight = ($tileWidth / (16/9))
$iconSize = 50px
$growFactor = 1.5 // 1.5 times the original size
$moveLeft = -($tileWidth * ($growFactor - 1) / 2)
$moveRight = $tileWidth * ($growFactor - 1)
body, html
padding: 0 10px
margin: 0
background: #0E0F11
color: #ecf0f1
font-family: 'Open Sans', sans-serif
min-height: 100vh
display: flex
flex-direction: row
align-items: center
width: 100%
* { box-sizing: border-box }
h1, p
text-align: center
p
width: 100%
max-width: 500px
margin: auto
a:link
a:hover
a:active
a:visited
transition: color 150ms
color: #95a5a6
text-decoration: none
a:hover
color: #7f8c8d
text-decoration: underline
.contain
width: 100%
.row
overflow: scroll
width: 100%
.row__inner
transition: $duration transform
font-size: 0
white-space: nowrap
margin: ($tileHeight / 2) 0
padding-bottom: 10px // Account for OS X scroll bar
.tile
position: relative
display: inline-block
width: $tileWidth
height: $tileHeight
margin-right: 10px
font-size: 20px
cursor: pointer
transition: $duration all
transform-origin: center left
.tile__img
width: $tileWidth
height: $tileHeight
object-fit: cover
.tile__details
position: absolute
bottom: 0
left: 0
right: 0
top: 0
font-size: 10px
opacity: 0
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%)
transition: $duration opacity
&:after
&:before
content: ''
position absolute
top: 50%
left: 50%
display: black
&:after
margin-top: (-($iconSize / 2))
margin-left: (-($iconSize / 2))
width: $iconSize
height: $iconSize
border: 3px solid #ecf0f1
line-height: $iconSize
text-align: center
border-radius: 100%
background: rgba(0,0,0,0.5)
z-index: 1
&:before
content: '▶'
left: 0
width: 100%
font-size: 30px
margin-left: 7px
margin-top: -18px
text-align: center
z-index: 2
.tile:hover &
opacity: 1
.tile__title
position absolute
bottom: 0
padding: 10px
// *
// * Hover effects
// *
// We assume when you hover .row, you're also hovering a .tile
// First, move the whole row towards the left
.row__inner:hover
transform: translate3d($moveLeft, 0, 0)
.row__inner:hover .tile
// Fade out every tile
opacity: .3
// And then grow the current tile and make it opaque again
&:hover
transform: scale($growFactor)
opacity: 1
// And finally move all tiles right of the current tile to the right,
// so its flush against the hovered tile
.tile:hover ~ .tile
transform: translate3d($moveRight, 0, 0)
A NEW KIND OF
COMPETITION
Directors Cut™ is a film competition that brings short films from directors around the world to battle for greatness on the silver screen. Each month, selected films will square off. The audience votes, and the winner moves on to the final round and a chance to win the cash prize.
The competitions will take place each month at the Quaker Cinema in New Philadelphia, Ohio. Audience members will enjoy dinner from local area restaurants before the films begin (dinner is included in the price of admission). Send your short film now, and secure your spot in the competition.
DIRECTORS
Your work is your masterpiece. You want the world to see what you've created. Submit your short films here.
AUDIENCE
You love to be the critic. Now enjoy an evening viewing, dinning, and voting for your favorite films.
VOTING
After you've seen the films, you will vote and find out which director will be moving to the next round.
Work
ABOUT THE
QUAKER CINEMA
Nestled in downtown New Philadelphia, the Quaker Cinema has supplied cinematic entertainment since 1940. Originally, the theater contained one massive screen in an auditorium that seated over 800 people. In the 1980s, the theater was converted into two screen to accommodate multiple movie showings. In 2015, the exterior was restored to the original marquee and the interior was modernized with a retro feel.