Buenas amigos como estanestán?
Tengo una consulta, estoy creando un scrollscroll de logos para un cliente el cual quiere que los logos estenestén en blanco y que al pasar el mouse estos se muestren en color, en ves de hacer una transiciontransición de imagenesimágenes se me ocurrioocurrió aplicarle un filtro, pero cuando le aplico el filtro en .orb.orb
este no cambia en :hover:hover
... estoy un poco trancado con esto, podrian hecharmepodrían echarme una mano? almenosalmenas darme una idea de lo que tengo que hacer..
Les
Les dejo el codigocódigo para que lo vea, muchas gracias!!
<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>
Codigo CSS
.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>
.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%; }
}