html - Layered CSS SVG masks not working -


i working on project have apply 2 svg masks div. used blend large header image background on right , left side.

the following html code using:

<div class="banner inner-slider">     <ul class="bx-slider">         <li class="mask" style="background-image: url('http://placehold.it/1440x610'); background-size: cover; background-position: center center;">             <div class="slide clearfix bigwrapper">                 <div class="col-md-1"></div>                 <div class="col-md-6 text-left">                     <h1>sample header</h1>                     <p>this sample header text. wee! isn't fun?</p>                 </div>             </div>         </li>     </ul> </div>

my css follows:

.mask {     -webkit-mask-image: url('../images/mask-right.png'),url('../images/mask-left.png');     mask: url("../images/mask-right.svg"),url("../images/mask-left.svg");     -webkit-mask-size: 100% 100%;     -webkit-mask-position: center; }

when have setup, neither mask shown. if break them out individual classes (mask-left , mask-right) , assign both div, 1 or other show, never both.

how both masks show?

i used svg great masking image animation

check output here

<style type="text/css">.myclass { fill: url(#image); backenter link description hereground-size:contain;}svg{display:block;margin:0 auto;}</style>  <svg id="layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"      height="792px" viewbox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">         <g id="layer_2"><path id='triangle' class='myclass' fill="#151515" d="m38.668,249.994l-1.333,8.667c0,0-12.667,24.667-15,28s2.766,334.326,2.766,334.992         s-1.667,350.326,16,353.326s28,2.333,28,2.333s6.333,32.999,5.333,34.999s1,9.334,16,14.667c0,0-3.667,9.665-2,12.665         s13.333,12.999,18,13.333c0,0,8.667,3.334,3,8.667c0,0-14.333,32.664,13,45.997c0,0-7.333,9.998-16.333,11.665         c0,0-17.667,7.666-16.667,27.666c0,0-4.333,69.336,5,85.336c0,0,12.666,23.671,10.333,35.671c0,0,7,18.332,8.333,25.666         c0,0,2.667,30.671,6.667,37.671l9,42.337c0,0-17.667,31.669-19.667,40.002s155,0,155,0s-16.667-38.337-17.333-48.671         s209,715.994,209,715.994s-16-58.668-5-76.334s20.667-15.669,38-38.669c0,0,16.667-18.006,19.667-18.006c0,0,9-11.67,10.333-22.003         v-44.667c0,0,30.332,24.334,34,28.667c0,0-7,17.333-7.334,22c-0.332,4.667,3.335,7.333,4.668,7.333         c1.332,0-0.741,12.334,4.129,18.334c4.869,6,5.203,3.333,5.203,3.333s-6.332,12.334,3,33.667c0,0,2.335,7.669-1,10.335         c-3.334,2.666-2.334,17.334,2.334,23.334c0,0-10,26.338-11,36.338s-1.063,18.333,1.136,20s-7.47,15.675-6.802,19.008         c0.666,3.333-6.334,15.334-6.667,20s285,792,285,792l327.159-0.096l612,365.5c0,0-46.5-20.5-83.5-28c0,0-53-15-64-22         c0,0-25.5-27-27-33s20-30,0-73.5c0,0,1-28.5-7.5-37c0,0-1-49-25-82.5s-42-67.499-99-90.833l188.667,0c0,0-35,6.667-47.333,19.001         c0,0-25.667,8.333-39,13c0,0-38.667,14.667-45.333,15c0,0-60,20.333-32,63c0,0,5.333,11.667,25.667,19c0,0-12,27.997-13.667,39.664         s-9.333,42.333-9.333,44.333s1,17.996,2.333,19.329"/> </svg>    <svg>     <defs>         <pattern patterncontentunits="objectboundingbox" id='image' width="3.4" height="1" viewbox="0 0 100 100" preserveaspectratio="none">             <image patterncontentunits="objectboundingbox" xlink:href='img/loop.jpg' width="100" height="100" preserveaspectratio="none">                 <animate attributetype="xml"                     attributename="x"                     from="-60" to=".2"                     dur="100s"                     repeatcount="50"/>              </image>         </pattern>     </defs> </svg>  [this how looks][1]

Comments

Post a Comment

Popular posts from this blog

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

android - How to create dynamically Fragment pager adapter -

i unable create dynamic layout each tabs, able create tabs dynamically constructor(public mypageradapter(fragmentmanager fm , int nooftabs)), coudn't inflate view each tabs creating each fragment should dyanmic. public class mypageradapter extends fragmentpageradapter { private final string[] titles = { "categories", "home", "top paid", "top free", "top grossing", "top new paid", "top new free", "trending" }; int nooftabs; **public mypageradapter(fragmentmanager fm , int nooftabs) { super(fm); this.nooftabs = nooftabs; }** /*public mypageradapter(fragmentmanager fm) { super(fm); }*/ @override public charsequence getpagetitle(int position) { return titles[position]; } @override public int getcount() { ...
Read more

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more