Skip to main content
se añadieron 415 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
Christian
  • 10.1k
  • 9
  • 21
  • 40

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%; }
}
 

Buenas amigos como estan? Tengo una consulta, estoy creando un scroll de logos para un cliente el cual quiere que los logos esten en blanco y que al pasar el mouse estos se muestren en color, en ves de hacer una transicion de imagenes se me ocurrio aplicarle un filtro, pero cuando le aplico el filtro en .orb este no cambia en :hover... estoy un poco trancado con esto, podrian hecharme una mano? almenos darme una idea de lo que tengo que hacer.. Les dejo el codigo 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%; }
}

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>
 

Origen Enlace

Filtros CSS en hover

Buenas amigos como estan? Tengo una consulta, estoy creando un scroll de logos para un cliente el cual quiere que los logos esten en blanco y que al pasar el mouse estos se muestren en color, en ves de hacer una transicion de imagenes se me ocurrio aplicarle un filtro, pero cuando le aplico el filtro en .orb este no cambia en :hover... estoy un poco trancado con esto, podrian hecharme una mano? almenos darme una idea de lo que tengo que hacer.. Les dejo el codigo 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%; }
}