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>