There is a block

<div class="shiping-box"> <div class="shiping-info"> <h3 class="shiping-box-title">1</h3> <p class="shiping-box-text">2</p> </div> <img src="img/shiping/docs.png" class="shiping-img"> </div>

By default .shiping-box-text has the property display:none; , when hovering I try to set display:block; , but for some reason it is ignored. Also the image does not move.

 .shiping-box:hover img.shiping-img{ right:0; transition:1s; } .shiping-box:hover .shiping-box-text{ display:block; } .shiping-img { right: -10rem; position: absolute; }

Why is that? How can you achieve the desired result?

    1 answer 1

    Everything is working:

     .shiping-img { right: -10rem; position: absolute; } .shiping-box-text { display: none; } .shiping-box:hover img.shiping-img{ right:0; transition:1s; } .shiping-box:hover .shiping-box-text{ display:block; } 
     <div class="shiping-box"> <div class="shiping-info"> <h3 class="shiping-box-title">1</h3> <p class="shiping-box-text">2</p> </div> <img src="https://dummyimage.com/100x100/000/fff" class="shiping-img"> </div>

    • I, for some reason, do not want. - Vitaliy RS
    • one
      Apparently, it is possible, in the given properties in another place? - Vitaliy RS
    • @ VitaliyRS, yes it is possible - HamSter