Html

<div class="post"> <div class="post_ic1"> <div class="ps_data"> <h5 class="dat_tx">30</h5> <h5 class="dat_tx">.Sep</h5> </div> </div> <h2 class="post_h2 post_h2_active">Lorem ipsum dolor sit amet</h2> <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</p> <a href="#">Read More <i class="fa fa-angle-double-right" aria-hidden="true"></i> </a> </div>

It is necessary to make it so that when you hover over the post block, the color "h2 class="post_h2", p , also the background and color of the blocks will class=dat_tx Now

should be so So

    2 answers 2

    Just describe all the required styles in blocks like this:

     post:hover .post_h2{ color: red; }

    Since you did not specifically say which styles are needed, I can’t provide ready-made code.

      This is how it is done: see snippet

       *{ margin:0; padding:0; } a{ text-decoration:none; color:#909090; padding:0 6px; } a:hover{ color:#000; text-decoration:underline; } .card{ width:300px; min-height:100px; margin:30px 10px; padding:0; background:#eee; color:#909090; font-size:20px; transition:background .5s; } .card:hover{ background:#b7e8ef; color:#111; } .card:hover img{ filter: grayscale(0%); -webkit-filter:grayscale(0%); } .card:hover a{ color:#fff; animation:link 1s infinite; } @-webkit-keyframes link{ from{ background:red; } } img{ display:block; width:100%; height:auto; filter: grayscale(100%); -webkit-filter:grayscale(100%); transition:all .5s; } img:hover{ filter: grayscale(0%); -webkit-filter:grayscale(0%); } .images{ width:100%; height:150px; position:relative; overflow:hidden; } .imgPosition{ position:absolute; top:-250px; } .text{ text-align:justify; width:98%; margin:auto; } 
       <div class="card"> <div class="images"> <div class="imgPosition"> <img src="http://avakartinki.ru/wp-content/uploads/2012/04/avatarka_nout08.jpg" alt="девушка с ноутбуком"> </div> </div> <div class="text"> <p> That is preciously how this string was constructed. Default text is for web developers and designers that need default text quickly. </p> </div> <div class="link"> <a href="">читать далее</a> </div> </div>