Cliping animowany div

Question

Próbuję stworzyć ładny stary efekt CRT "tv" za pomocą animacji w CSS, ale mając pewne problemy z linią wyświetlaną powyżej i poniżej zamierzonego div.

Mam stronę docelową, która ma 4 elementy div, które prowadzą do innych obszarów witryny. Pierwsze 2 elementy div to "telewizory", z których każdy ma tło przedstawiające "telewizor" (obraz statyczny) treści linku.

Na pulpicie lub na innym dużym ekranie 4 elementy div są wyświetlane jako 2x2, na mniejszym ekranie jest wyświetlany w formacie 1x4.

Stworzyłem pojedynczy obraz, który będzie animowany za pomocą css, aby sfałszować ruchome linie przesuwające się w dół o 1 2 elementy div.

Co się dzieje, że "linie skanowania" pojawiają się nad "telewizorami" i przechodzą pod "telewizory".

Można zobaczyć, co dzieje się na JSFiddle: http://jsfiddle.net/blyzz/ynekxcud/2/

Oto niektóre oczyszczony HTML kod:

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

oraz towarzyszący mu oczyszczony 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;} 
} 

Uważałem dokonywania „okno "z wyższymi indeksami z-index powyżej i poniżej 2 telewizorów, ale nie działa to dobrze z responsywnym wyglądem.

Każda pomoc zostanie doceniona!

P.S. Byłoby miło, gdybym mógł uzyskać linie skanowania za zaokrąglonymi narożnikami, ale to naprawdę nie jest rozdanie kuponów - zawsze mogę usunąć zaokrąglone rogi.

Answer 1

Trzeba overflow: hidden w swojej klasie .content:

tak:

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