Ausschnitt eines animierten div

Question

Ich versuche, einen schönen alten CRT "TV" -Effekt durch Verwendung von Animation in CSS, aber einige Probleme mit den Scanzeilen oberhalb und unterhalb der vorgesehenen div.

Was ich habe, ist eine Zielseite, die 4 divs hat, die zu anderen Bereichen der Website verknüpfen. Die ersten 2 Divs sind "TVs", jeder hat einen Hintergrund, der das "tv" (statisches Bild) des Inhalts des Links zeigt.

Auf einem Desktop oder einem anderen größeren Bildschirm werden die 4 Divs als 2x2 angezeigt, auf einem kleineren Bildschirm wird es in einem 1x4-Format angezeigt.

Ich habe ein einzelnes Bild erstellt, das mit CSS animiert wird, um die beweglichen Scanlinien zu fälschen, die sich die ersten 2 Divs bewegen.

Was passiert ist, dass die "Scanlines" über den "TVs" erscheinen und sich unter die "TVs" bewegen.

können Sie sehen, was auf JSFiddle geschieht: http://jsfiddle.net/blyzz/ynekxcud/2/

Hier einige gesäuberte HTML-Code ist:

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

und der dazu gehörige gereinigt 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;} 
} 

ich als ein „Fenster machen "mit höheren Z-Index Divs über und unter den 2 TVs, aber es funktioniert nicht wirklich gut mit Responsive Design.

Jede Hilfe wäre willkommen!

P.S. Es wäre schön, wenn ich die Scanlinien auch hinter den abgerundeten Ecken bekommen könnte, aber es ist nicht wirklich ein Deal-Breaker - ich kann immer die abgerundeten Ecken entfernen.

Answer 1

Sie benötigen overflow: hidden in Ihrer .content Klasse:

So:

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