carousel icons

[marcelo2112]

In the icon carousel,just before the footer is it possible to make them fix and for instance when you pass the mouse in one logo it changes from black and white to a color one?
Thx again for the support

---

[Support]

Hello, yes, try this:

HTML:

<div class="owl-carousel" data-plugin-options='{"items": 5, "singleItem": false}'>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-1.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-2.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-3.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-4.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-5.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-6.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-4.png" alt="">
	</div>
	<div>
		<img class="img-responsive saturation" src="img/logos/logo-2.png" alt="">
	</div>
</div>

CSS: (css/custom.css)

img.saturation {
	width: 100%;
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	width: 100%;
	opacity: 0.5;
}

img.saturation:hover {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	opacity: 1;
	filter: none;
	-webkit-filter: none;
}

Thanks.

---

[marcelo2112]

thanks!

worked great!

---

[Author]

Posts