2

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>

2 respuestas 2

6

El problema es que en tu css estás usando la pseudo-clase :hover en las etiquetas hijas de la etiqueta img que tengan la clase .efecto.

Cómo la etiqueta img no puede tener etiquetas dentro esto no funcionará y si lo hiciera no aplicaría el efecto a img sino a sus hijas

El css debería ser así para que funcione

.efecto:hover {
  opacity: 0.2; 
}

y las imagenes así

<img src="ejemplo.jpg" class="efecto">

Este es el ejemplo funcional

.efecto:hover{
  opacity:.5
}
<img class="efecto" width="200px" src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Fpeopledotcom.files.wordpress.com%2F2018%2F04%2Floki_the_sphynx-01_1.jpg%3Fw%3D1800&w=800&q=85"> 

2

Observaciones para CSS

Si vas a vincular el hijo de una etiqueta se deja espacio, ejemplo:

Para el siguiente elemento o etiqueta:

HTML

<div>
    <article></article>
</div>

Para darle estilos al contenido de la etiqueta <article> en CSS sería:

div article{
    // aquí los estilos...  
}

Ahora, si vas a vincular etiquetas con atributos o propiedades que esten en el mismo nivel, o sea, que se encuentren dentro del mismo elemento u objeto del DOM, entonces no debes dejar espacio. Ejemplo:

<div class="efecto"></div>

Desde el CSS deberías vincularlo de la siguiente manera:

div.efecto{
    // aquí los estilos...
}

Si te das cuenta, al llamarlo desde CSS no se dejan espacios pues, la propiedad class="efecto" se encuentra dentro de la misma etiqueta <div>

Ese es el error que tienes en tu código.

Te dejo un ejemplo que puedes ejecutar y ver el efecto para que lo apliques a tu código.

Ten en cuenta que hay un espacio entre [div] e [#imagen].

div #imagen:hover{
  opacity: 0.2;
}
<div>
  <img src="http://placeimg.com/256/192/any" id="imagen">
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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