Так задумано что бы hover работал ТОЛЬКО при наведении на g.path то
есть при наведении на другое изображение справа hover не было!
Основной причиной такого эффекта была строка в обоих масках:
<rect width="100%" height="100%" fill="#fff" />
,
что расширяла диапазон действия маски на 100% в ширину и высоту.
А так как у обоих масок это условие было одинаковое, то происходило срабатывание на обоих изображениях, так как диапазоны действия масок пересекались.
Вместо масок, чтобы обрезать изображения был использован clipPath
. которые оставляли у одного изображения левую часть, а у второго изображения правую часть.
Поэтому стало возможно срабатывание анимации плавающего изображения при наведении
только на левое изображение:
.imgLeft:hover ~ .m {
opacity: 1;
animation: move 1s 0.2s forwards;
}
При необходимости можно сделать срабатывание анимации при наведении на правое изображение:
.imgRight:hover ~ .m {
opacity: 1;
animation: move 1s 0.2s forwards;
}
Заменил transition
на animation
в данном примере это работает более плавно.
Заменил ссылки изображений на https://i.stack.imgur.com
<svg viewBox="0 0 900 300">
<defs>
<style>
.m {
cursor: pointer;
pointer-events:none;
transform: translate(-570px, 0);
opacity: 0.2;
}
.imgLeft {
clip-path:url(#a);
}
.imgRight {
clip-path:url(#b);
}
.imgLeft:hover ~ .m {
opacity: 1;
animation: move 1s 0.2s forwards;
}
@keyframes move {
0% {transform: translate(-570px, 0); }
100% {transform: translate(0, 0); }
}
text {
font-family: sans-serif;
font-size: 16px;
fill: #fff;
}
line,
circle {
stroke: #fff;
stroke-width: 2;
fill: none;
}
.unit {
font-size: 33px;
}
</style>
</defs>
<defs>
<clipPath id="a">
<path fill="white" d="M0,0 570,0 420,300 0,300z" />
</clipPath>
<clipPath id="b">
<path fill="black" d="M570,0 900,0 900,300 420,300z" />
</clipPath>
<clipPath id="p" >
<path fill="white" d="M370,0 570,0 420,300 220,300z" stroke="red" stroke-width="6" />
</clipPath>
</defs>
<!-- Нижнее изображение (правое) -->
<image class="imgRight" href="https://i.stack.imgur.com/wLWXh.jpg" x="0" y="0" width="900" height="300"/>
<!-- Верхнее изображение (левое) -->
<image class="imgLeft" href="https://i.stack.imgur.com/M5yri.jpg" x="0" y="0" width="900" height="300" />
<g class="m" >
<!-- Плавающее изображение -->
<image pointer-events="none" href="https://expertology.ru/upload/medialibrary/7ad/1.png" x="-30" y="0" width="100%" height="100%" clip-path="url(#p)" />
<!-- <path d="M350,0 550,0 400,300 200,300z" fill="none" stroke="#fff" stroke-width="6" /> -->
<path fill="none" d="M370,0 570,0 420,300 220,300z" stroke="white" stroke-width="6" />
<text x="280" y="260"> Монтаж</text>
<text x="375" y="264" class="unit"> › </text>
<line x1="275" x2="340" y1="270" y2="270" />
<circle cx="380" cy="255" r="14" />
</g>
</svg>
Вариант плавного появления и исчезновения
<svg viewBox="0 0 900 300">
<defs>
<style>
.m {
cursor: pointer;
pointer-events:none;
transform: translate(-570px, 0);
opacity: 0.2;
transition: 1s;
}
.imgLeft {
clip-path:url(#a);
}
.imgRight {
clip-path:url(#b);
}
.imgLeft:hover ~ .m {
opacity: 1;
transform: translate(0, 0);
}
text {
font-family: sans-serif;
font-size: 16px;
fill: #fff;
}
line,
circle {
stroke: #fff;
stroke-width: 2;
fill: none;
}
.unit {
font-size: 33px;
}
</style>
</defs>
<defs>
<clipPath id="a">
<path fill="white" d="M0,0 570,0 420,300 0,300z" />
</clipPath>
<clipPath id="b">
<path fill="black" d="M570,0 900,0 900,300 420,300z" />
</clipPath>
<clipPath id="p" >
<path fill="white" d="M370,0 570,0 420,300 220,300z" stroke="red" stroke-width="6" />
</clipPath>
</defs>
<!-- Нижнее изображение (правое) -->
<image class="imgRight" href="https://i.stack.imgur.com/wLWXh.jpg" x="0" y="0" width="900" height="300"/>
<!-- Верхнее изображение (левое) -->
<image class="imgLeft" href="https://i.stack.imgur.com/M5yri.jpg" x="0" y="0" width="900" height="300" />
<g class="m" >
<!-- Плавающее изображение -->
<image pointer-events="none" href="https://expertology.ru/upload/medialibrary/7ad/1.png" x="-30" y="0" width="100%" height="100%" clip-path="url(#p)" />
<!-- <path d="M350,0 550,0 400,300 200,300z" fill="none" stroke="#fff" stroke-width="6" /> -->
<path fill="none" d="M370,0 570,0 420,300 220,300z" stroke="white" stroke-width="6" />
<text x="280" y="260"> Монтаж</text>
<text x="375" y="264" class="unit"> › </text>
<line x1="275" x2="340" y1="270" y2="270" />
<circle cx="380" cy="255" r="14" />
</g>
</svg>