0

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>

1 respuesta 1

1

Está chevere el css, si entendí bien tu pregunta creo que es sencillo.

Agregar filter: grayscale(1); para que se vea por defecto en tonalidad de grises (coloquialmente blanco y negro), y en .orb:hover desactivarla con filter: none;

.orb {
  width: flex;
  height: 50px;
  display: flex;
  margin: 0 24.7px;
  float: left;
  transition: all .2s ease-out;
  filter: grayscale(1);
}

.orb:hover {
  transform: scale(1.2);
  opacity: .5;
  cursor: pointer;
  filter: none;
}

.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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.