Alter child element when hovering in father

Navigation
-1

I need to make hover on the div with class="item" the image make the transition that is set.

As I have it, the image only "transforms" if I do hover in it but not if I do it in the div.

I've seen this other question: Add style to an element when hovering the parent element , but it has not helped me. 

.img_block .noticias_imagen {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s;
}

.img_block:hover .noticias_imagen {
  transform: rotate(25deg) scale(1.5);
}
<div class="item">
  <div class="img_block img_blockG">
    <img class="noticias_imagen" src="http://segurosbaratos.motorgiga.com/uploads/comparador_seguros_de_coche.jpg" alt="">
  </div>
  <div class="carousel_body">
    <div class="team_title">
      <h6>{{ noticia.titulo }}</h6>
    </div>
    <div class="team_desc">{{ noticia.desc|raw }}</div>
    <div class="team_icons_wrapper"><a class="btn btn-default" role="button" href="{{ noticia.link }}" target="_blank">{{ "Sigue.leyendo"|trans }} &raquo;</a></div>
  </div>
</div>
    
asked by Pavlo B. 02.02.2018 в 13:27
source

2 answers

4

When you hover in item you want to change a property of the image I understand, right?

In that case I would serve you with: 

    .item:hover .noticias_imagen {
       transition: transform 0.4s;
    }
    
answered by 02.02.2018 / 13:36
source
0

The problem is in the selector of the rule that contains the transform property. This property is applied to the class .img_block and not to .item

    
answered by 03.02.2018 в 17:23
Remove word from char array that starts and ends with 'a' in java First steps with JavaFX [closed]