Skip to main content

La pseudo-clase :hover no me funciona

Un gran saludo:

Estoy tratando de colocar el efecto :hover a estas imágenes, pero no funciona, son varias imágenes, entonces le di un nombre a la clase "efecto" pero no se por que no funciona, le quiero dar una opacidad, a continuación muestro como lo estoy haciendo.

Gracias.

img .efecto:hover {
  opacity: 0.2; 
}
 <div class="row">

    <div class="offset-lg-2 col-lg-3 col-md-3">
      <h4 class="texto_servicios">IDENTIDAD</h4>
      <img src="imagenes/c1.png" class="img-fluid d-none d-lg-block float-right" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">PUBLICIDAD</h4>
      <img src="imagenes/c2.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample1">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">DISEÑO WEB</h4>
      <img src="imagenes/c3.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample2">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>
    
   </div>

:hover no me funciona

Un gran saludo:

Estoy tratando de colocar el efecto :hover a estas imágenes, pero no funciona, son varias imágenes, entonces le di un nombre a la clase "efecto" pero no se por que no funciona, le quiero dar una opacidad, a continuación muestro como lo estoy haciendo.

Gracias.

img .efecto:hover {
  opacity: 0.2; 
}
 <div class="row">

    <div class="offset-lg-2 col-lg-3 col-md-3">
      <h4 class="texto_servicios">IDENTIDAD</h4>
      <img src="imagenes/c1.png" class="img-fluid d-none d-lg-block float-right" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">PUBLICIDAD</h4>
      <img src="imagenes/c2.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample1">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">DISEÑO WEB</h4>
      <img src="imagenes/c3.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample2">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>
    
   </div>

La pseudo-clase :hover no funciona

Estoy tratando de colocar el efecto :hover a estas imágenes, pero no funciona, son varias imágenes, entonces le di un nombre a la clase "efecto" pero no se por que no funciona, le quiero dar una opacidad, a continuación muestro como lo estoy haciendo.

img .efecto:hover {
  opacity: 0.2; 
}
 <div class="row">

    <div class="offset-lg-2 col-lg-3 col-md-3">
      <h4 class="texto_servicios">IDENTIDAD</h4>
      <img src="imagenes/c1.png" class="img-fluid d-none d-lg-block float-right" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">PUBLICIDAD</h4>
      <img src="imagenes/c2.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample1">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">DISEÑO WEB</h4>
      <img src="imagenes/c3.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample2">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>
    
   </div>

Origen Enlace
linjai
  • 151
  • 2
  • 3
  • 17

:hover no me funciona

Un gran saludo:

Estoy tratando de colocar el efecto :hover a estas imágenes, pero no funciona, son varias imágenes, entonces le di un nombre a la clase "efecto" pero no se por que no funciona, le quiero dar una opacidad, a continuación muestro como lo estoy haciendo.

Gracias.

img .efecto:hover {
  opacity: 0.2; 
}
 <div class="row">

    <div class="offset-lg-2 col-lg-3 col-md-3">
      <h4 class="texto_servicios">IDENTIDAD</h4>
      <img src="imagenes/c1.png" class="img-fluid d-none d-lg-block float-right" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">PUBLICIDAD</h4>
      <img src="imagenes/c2.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample1">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>

    <div class="col-lg-3">
      <h4 class="texto_servicios">DISEÑO WEB</h4>
      <img src="imagenes/c3.png" class="img-fluid d-none d-lg-block float-right " data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
      <div class="collapse" id="collapseExample2">
      <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
      </div>
    </div>
    
   </div>