将混合模式应用于轮播图片时出现问题

时间:2019-04-23 15:00:05

标签: css mix-blend-mode

我的目标是对轮播中找到的图像应用混合模式和悬停效果。我已经管理了图像处理的第一部分和最后一部分,其中图像是灰度图像,并且在悬停时移除了滤镜,但是没有达到我想要的混合模式。

Fiddle

<div id="slideshow" class="sqs-gallery-design-strip">
<div class="sqs-wrapper" style="left: -758.913px; width: 6334px;">
<div class="slide sqs-gallery-design-strip-slide"><img src="https://static1.squarespace.com/static/5cbe1087b914495dbc437322/5cbe141415fcc02d992a6f3d/5cbf6380a4222f7ffa16a645/1556558910035/sblm-landing-mixed-use-residential-icon.jpg" data-image-dimensions="700x700" data-image-focal-point="0.5,0.5" alt="Retail Studio" style="" class="" data-image-resolution="750w" src="https://static1.squarespace.com/static/5cbe1087b914495dbc437322/5cbe141415fcc02d992a6f3d/5cbf6380a4222f7ffa16a645/1556558910035/sblm-landing-mixed-use-residential-icon.jpg?format=750w">
<div class="image-description"><strong>Retail Studio</strong> </div>
</div>
</div>
</div>

先例:https://codepen.io/meowwwls/pen/zoRjdK

0 个答案:

没有答案