Clipping an animated div

Question

I'm trying to create a nice old CRT "tv" effect using animation in CSS, but having some problems with the scanlines displaying above and below the intended div.

What I have is a landing page that has 4 divs that link to other areas of the site. The 1st 2 divs are "TVs" each have a background showing the "tv" (static image) of the content of the link.

On a desktop or other larger screen, the 4 divs are displayed as 2x2, on a smaller screen it's shown in a 1x4 format.

I've created a single image that will be animated with css to fake the moving scanlines moving down the 1st 2 divs.

What's happening is that the "scanlines" appear above the "TVs" and move to below the "TVs".

You can see what's happening on JSFiddle: http://jsfiddle.net/blyzz/ynekxcud/2/

Here's some cleansed HTML code:

<a href="URL1" target="_blank">
    <div class="content" id="outside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanout">
            </div>
            <div class="aniscan" id="aniscanout2">
            </div>
        </div>
    </div>
</a>
<a href="URL2" target="_blank">
    <div class="content" id="inside">
        <div class="scanlines">
            <div class="aniscan" id="aniscanin">
            </div>
            <div class="aniscan" id="aniscanin2">
            </div>
        </div>
    </div>
</a>

and the accompanying cleansed CSS:

.content{
    width: 300px;
    min-width: 300px;
    height: 125px;
    min-height: 125px;
    float:left;
    margin: 5px;
    border: 3px solid #555555;
    z-index: -100;
}

.scanlines{
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    z-index: 100;
}

.aniscan{
    width: 100%;
    height: 100%;
    background-image: url('http://www.oocities.org/~special_effect/holo_scanlines.jpg');
    background-repeat: repeat-x;
    z-index: 200;
    position: relative;
    opacity:0.6;
}

#inside {   
    background-image: url('http://www.clipartbest.com/cliparts/xig/7rM/xig7rMriA.png');
    border-radius: 0px 15px 0px 0px;
}

#outside{
    background-image: url('http://cdn.graphicsfactory.com/clip-art/image_files/image/6/1347556-2587-Royalty-Free-Dog-With-Big-Bone-In-Mouth.jpg');
    border-radius: 15px 0px 0px 0px;
}

#aniscanin{
    -webkit-animation: mymove 5.2s linear infinite;
    -moz-animation: mymove 5.2s linear infinite;
    -o-animation: mymove 5.2s linear infinite;
    animation: mymove 5.2s linear infinite;
}

#aniscanin2{
    -webkit-animation: mymoveb 5.2s linear infinite;
    -moz-animation: mymoveb 5.2s linear infinite;
    -o-animation: mymoveb 5.2s linear infinite;
    animation: mymoveb 5.2s linear infinite;
}

#aniscanout{
    -webkit-animation: mymove 4.8s linear infinite;
    -moz-animation: mymove 4.8s linear infinite;
    -o-animation: mymove 4.8s linear infinite;
    animation: mymove 4.8s linear infinite;
}

#aniscanout2{
    -webkit-animation: mymoveb 4.8s linear infinite;
    -moz-animation: mymoveb 4.8s linear infinite;
    -o-animation: mymoveb 4.8s linear infinite;
    animation: mymoveb 4.8s linear infinite;
}

@-webkit-keyframes mymove {
    0% {top: -125px;}
    100% {top: 0px;}
}

@keyframes mymove {
    0% {top: -125px;}
    100% {top: 0px;}
}

@-webkit-keyframes mymoveb{
    0% {top: -125px;}
    100% {top: 0px;}
}

@keyframes mymoveb {
    0% {top: -125px;}
    100% {top: 0px;}
}

I considered making a "window" with higher z-index divs above and below the 2 TVs, but it doesn't really work well with responsive design.

Any help would be appreciated!

P.S. It'd be nice if i could get the scanlines behind the rounded corners as well, but it's not really a deal-breaker - I can always remove the rounded corners.

Answer 1

You need overflow: hidden in your .content class:

Like this:

.content{
    width: 300px;
    min-width: 300px;
    height: 125px;
    min-height: 125px;
    float:left;
    margin: 5px;
    border: 3px solid #555555;
    z-index: -100;
    overflow: hidden;
}

Fiddle: http://jsfiddle.net/ynekxcud/3/