Question

我想问一问，是否可以仅使用一张图像来产生更多的悬停效果？例如，将一张图像分为几列，每一列都有自己的效果，就像将图像分为透明区域一样。

谢谢你，卡罗

Answer 1

我找到了解决问题的方法。

.x { opacity:0; cursor: pointer;}
		.x:hover { opacity:1; }

<svg width="600" height="600" viewBox="0 0 600 600">
	<defs>
		<filter id="blur">
			<feGaussianBlur stdDeviation="8"/>
		</filter>
		<image href="https://i.imgur.com/Lky5aRQ.jpg" width="600" height="600" id="img"/>
		<clipPath id="c1">
			<path d="M0 0h100v600h-100z"/>
		</clipPath>
		<clipPath id="c2">
			<path d="M100 0h100v600h-100z"/>
		</clipPath>
		<clipPath id="c3">
			<path d="M200 0h100v600h-100z"/>
		</clipPath>
		<clipPath id="c4">
			<path d="M300 0h100v600h-100z"/>
		</clipPath>
		<clipPath id="c5">
			<path d="M400 0h100v600h-100z"/>
		</clipPath>
		<clipPath id="c6">
			<path d="M500 0h100v600h-100z"/>
		</clipPath>
	</defs>
	<use xlink:href="#img"/>
	<use xlink:href="#img" filter="url(#blur)" clip-path="url(#c1)" class="x"/>
	<use xlink:href="#img" filter="url(#blur)" clip-path="url(#c2)" class="x"/>
	<use xlink:href="#img" filter="url(#blur)" clip-path="url(#c3)" class="x"/>
	<use xlink:href="#img" filter="url(#blur)" clip-path="url(#c4)" class="x"/>
	<use xlink:href="#img" filter="url(#blur)" clip-path="url(#c5)" class="x"/>
	<use xlink:href="#img" filter="url(#blur)" clip-path="url(#c6)" class="x"/>
</svg>

谢谢

具有更多悬停效果的独特图像

1 个答案: