I am trying to create a nice old "tv" effect in CRT using CSS animations, but having some problems with the scan lines displayed above and below the intended div.
I have a landing page with 4 divs that link to other areas of the site. 1st 2 divs - "TVs", each of which has a background showing "tv" (static image) of the link content.
On the desktop or other larger screen, 4 divs are displayed as 2x2, on a smaller screen shown in 1x4 format.
I created one image that will be animated using css to fake moving scan lines moving along the 1st and 2nd sections.
What happens is that the "scanned lines" appear above the "TVs" and go to the "TVs".
You can see what happens on JSFiddle: http://jsfiddle.net/blyzz/ynekxcud/2/
Here is some cleared HTML:
<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 followed by cleaned 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 thought about creating a “window” with higher z-indexes above and below two TVs, but it doesn't work very well with a flexible design.
Any help would be appreciated!
PS It would be nice if I could get the scanned lines around the rounded corners, but in fact it is not a robber - I can always remove the rounded corners.