Buenas amigos como están?
Tengo una consulta, estoy creando un scroll de logos para un cliente el cual quiere que los logos estén en blanco y que al pasar el mouse estos se muestren en color, en ves de hacer una transición de imágenes se me ocurrió aplicarle un filtro, pero cuando le aplico el filtro en .orb
este no cambia en :hover
... estoy un poco trancado con esto, podrían echarme una mano? almenas darme una idea de lo que tengo que hacer.
Les dejo el código para que lo vea, muchas gracias!!
.orb {
width: flex;
height: 50px;
display: flex;
margin: 0 24.7px;
float: left;
transition: all .2s ease-out;
}
.orb:hover {
transform: scale(1.2);
opacity: .5;
cursor: pointer;
}
.marquee {
height: 150px;
width: flex;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.span1{
display:inline-block;
}
.marquee--inner {
display: inline-block;
width: 300%;
margin: 70px 0;
position: absolute;
animation: marquee 40s linear infinite;
}
.marquee--inner:hover {
animation-play-state: paused;
}
/*.half {
float: left;
width: 10%;
}*/
span {
float: left;
width: 50%:
}
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
<div class="marquee">
<div class="marquee--inner">
<span class="span1">
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/filtros-fleetguard-_1.png?v=1627614020" class="orb"></d>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/stp_87f06c84-72ab-4bb2-b46f-5ee65180ae50.png?v=1627613504" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/refresh.png?v=1627613505" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/Michelin-Logo_1.png?v=1627613504" class="orb"></d>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/Logo_Castrol_SIN_FONDO.png?v=1627613504" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/california.png?v=1627613504" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/axion_4180b5d3-2081-4dce-9232-d36b79bae606.png?v=1627613504" class="orb"></d>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/armorall.png?v=1627613505" class="orb"></d>
</span>
<span class="span1">
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/filtros-fleetguard-_1.png?v=1627614020" class="orb"></d>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/stp_87f06c84-72ab-4bb2-b46f-5ee65180ae50.png?v=1627613504" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/refresh.png?v=1627613505" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/Michelin-Logo_1.png?v=1627613504" class="orb"></d>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/Logo_Castrol_SIN_FONDO.png?v=1627613504" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/california.png?v=1627613504" class="orb"></img>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/axion_4180b5d3-2081-4dce-9232-d36b79bae606.png?v=1627613504" class="orb"></d>
<img src="https://cdn.shopify.com/s/files/1/0508/9237/4177/files/armorall.png?v=1627613505" class="orb"></d>
</span>
</div>
</div>