Clipping un div animato

Question

Sto cercando di creare un piacevole effetto vecchio CRT "tv" utilizzando l'animazione in CSS, ma avere alcuni problemi con le linee di scansione visualizzazione di sopra e al di sotto della div previsto.

Quello che ho è una pagina di destinazione che ha 4 div che si collegano ad altre aree del sito. I primi 2 div sono "TV" ciascuno con uno sfondo che mostra la "tv" (immagine statica) del contenuto del collegamento.

Su un desktop o uno schermo più grande, i 4 div sono visualizzati come 2x2, su uno schermo più piccolo è mostrato in un formato 1x4.

Ho creato una singola immagine che verrà animata con i CSS di falsificare l'linee di scansione in movimento in movimento verso il basso il 1 ° 2 div.

Quello che sta succedendo è che le "linee di scansione" appaiono sopra il "piatto" e si muovono al di sotto del "piatto".

Si può vedere cosa sta succedendo sul JSFiddle: http://jsfiddle.net/blyzz/ynekxcud/2/

Ecco po 'di codice HTML puliti:

<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> 

e l'accompagnamento CSS purificato:

.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;} 
} 

ho pensato di fare una "finestra "con più alti z-index divs sopra e sotto i 2 TV, ma in realtà non funziona bene con il responsive design.

Qualsiasi aiuto sarebbe apprezzato!

P.S. Sarebbe bello se riuscissi a ottenere anche le scansioni dietro gli angoli arrotondati, ma non è un vero rompicapo: posso sempre rimuovere gli angoli arrotondati.

Answer 1

È necessario overflow: hidden nella .content classe:

Ti piace questa:

.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/