But so that svg itself does not increase:

svg{ display:block; margin:auto; } #img1{ } image{ width:400px; height:200px; } image:hover{ transform:scale(1.2); cursor:pointer; } 
 <svg width="400" height="240" style="position:relative; left:-120px;"> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240"> <image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" /> </pattern> </defs> <polygon class="girls" points="110 220,10 10,380 10,380 220" style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" /> </svg>

100% solution BUT it is a pity that not on SVG:

 html,body{ height:100%; } .block{ width:100%; height:100%; outline:2px solid #fff; position:relative; } .a { width:100%; height:50%; position:relative; background:url(http://fs132.www.ex.ua/show/20172530/20172530.jpg?800); background-size:100% 100%; -webkit-clip-path: polygon(0 0,100% 0,50% 100%); transition:background 5s; position:absolute; left:0; top:0; } .b { width:100%; height:50%; position:relative; background:url(http://wallpaper.pickywallpapers.com/1920x1080/girl-in-sundress-on-a-beach.jpg); background-size:100% 100%; -webkit-clip-path: polygon(100% 100%, 50% 0%,0% 100% ); transition:background 5s; background-position:40% 40%; position:absolute; left:0; bottom:0; } .c { width:50%; height:100%; position:relative; background:red url(http://www.periodistadigital.com/imagenes/2014/07/30/chicas-sexy-en-la-playa-y-en-bikini.jpg); background-size:100% 100%; -webkit-clip-path: polygon(0% 0%,100% 50%,0% 100% ); transition:background 5s; background-position:40% 40%; position:absolute; left:0; top:0; } .d { width:50%; height:100%; position:relative; background:red url(http://x.imagefapusercontent.com/u/candy2go/5776373/110509905/censored_firm20.jpg); background-size:100% 100%; -webkit-clip-path: polygon(100% 0,0% 50%,100% 100% ); transition:background 5s; background-position:40% 40%; position:absolute; right:0; top:0; } .a,.b,.c,.d{ background-position:100% 100%; } .a:hover, .b:hover, .c:hover, .d:hover{ background-size:140% 140%; } 
 <div class="block"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </div>

  • one
    Chic question. And the girls are beautiful. And about the increase in the topic. :) And on the subject - place the SVG inside the DIV with the required dimensions - rjhdby
  • oddly enough, but the image does not reach that he hover, if you put this status directly in the developer console - everything increases - Grundy
  • That is, this question is a duplicate of an existing one? - Grundy
  • judging by the tick, the answer was still received: stackoverflow.com/questions/37776000/… - Grundy
  • Let's continue the discussion in the chat . - Grundy

2 answers 2

As a workaround, you can create two templates, and on a hover polygon, change it.

 svg { display: block; margin: auto; } #img1 {} image { width: 400px; height: 200px; } .girls { transform: scale(1.2); cursor: pointer; } .fff { fill: url(#img1); stroke: 0; stroke-width: 0; } .fff:hover { fill: url(#img2); } 
 <svg width="400" height="240" style="position:relative; left:-120px;"> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240"> <image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" /> </pattern> <pattern id="img2" patternUnits="userSpaceOnUse" width="400" height="240"> <image class="girls" xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" /> </pattern> </defs> <polygon class="fff" points="110 220,10 10,380 10,380 220" opacity="1" /> </svg>

  • though not a solution But ... - user33274

Actually it is ALMOST what I needed, this solution is 90%, it remains only to make a 100% screen

 .block{ width:360px; height:360px; outline:2px solid #fff; margin:30px auto; position:relative; } .a { width: 360px; height: 140px; position:relative; background:url(http://fotki.ucoz.kz/_ph/16/149776029.jpg); background-size:100% 100%; -webkit-clip-path: polygon(0 0,360px 0,180px 140px); transition:background .5s; background-position:40% 40%; position:absolute; left:0; top:0; } .a:hover{ background-size:140% 140%; } .b { width: 180px; height: 280px; position:relative; background:url(http://boombob.ru/img/picture/Jul/03/57264ba39f9eb692ef1a44b06093d7d9/6.jpg); background-size:100% 100%; -webkit-clip-path: polygon(0 0,0 280px,180px 140px); transition:background .5s; background-position:40% 40%; position:absolute; left:0; } .b:hover{ background-size:140% 140%; } .c { width: 180px; height: 280px; background:url(http://boombob.ru/img/picture/Jul/11/f3455666325f1896f6e83e7326cefca8/1.jpg); background-size:100% 100%; -webkit-clip-path: polygon(280px -100px, 0px 140px,880px 820px); transition:background .5s; background-position:40% 40%; position:absolute; right:0; top:0; } .c:hover{ background-size:140% 140%; } .d { width: 360px; height: 280px; background:url(http://lviv.mycityua.com/images/01_kaindy.jpg); background-size:100% 100%; -webkit-clip-path: polygon(180px 60px, 0px 200px,360px 200px); transition:background .5s; background-position:40% 40%; position:absolute; left:0; bottom:0; } .d:hover{ background-size:140% 140%; } html, body { height: 100%; } h1{ text-align:center; font-weight:900; font-size:8vw; color:rgba(200,0,0,.6); text-shadow:10px -3px 20px #000, 10px 6px 10px #555, 10px -2px 20px #cc0000; } 
 <h1>clip-path hover background </h1> <div class="block"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </div>