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

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.