1

Но так что бы сам svg не увеличивался :

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% решение НО жаль что не на 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>

6
  • 1
    Шикарный вопрос. И девушки красивые. И про увеличение в тему. :) А по теме - поместите SVG внутрь DIV с нужными габаритами
    – rjhdby
    10 авг 2016 в 7:15
  • как ни странно, но до image не доходит что он hover, если выставлять в консоли разработчика этот статус напрямую - все увеличивается
    – Grundy
    10 авг 2016 в 7:18
  • то есть данный вопрос дубликат уже существующего?
    – Grundy
    10 авг 2016 в 7:22
  • судя по галочке, ответ все-таки был получен: stackoverflow.com/questions/37776000/…
    – Grundy
    10 авг 2016 в 7:23
  • Давайте продолжим обсуждение в чате.
    – Grundy
    10 авг 2016 в 7:24

2 ответа 2

3

В качестве обходного пути можно завести два шаблона, и на hover полигона менять его.

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>

1
  • хоть и не решение Но ...
    – user33274
    11 авг 2016 в 10:10
2

Собственно это ПОЧТИ то что мне надо было , это решение на 90%, осталось только сделать на 100% экрана

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.