This is the situation:

https://jsfiddle.net/cg1pubv6/

.recent_work__column__w2 { width: 262px; height: 320px; background: red; display: block; } .recent_work__column__w2:hover { width: 262px; height: 320px; background: green; display: block; } 
 <div> <a href="#" class="recent_work__column__w2"> <p class="recent_work__column__title">Brand</p> <p class="recent_work__column__tagline">tagline here</p> </a> </div>

It is necessary when pointing to a block (when it changes color) so that the text itself disappears. how to achieve this?

  • one
    .recent_work__column__w2: hover p {opacity: 0; } - soledar10
  • thank you cool - Identic
  • @ Identicon, if the answer came up to you, accept it (click the gray tick under the answer rating) - Duck Learns to Take Cover
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

Option 1 - recent_work__column__w2:hover p{opacity: 0;}

Option 2 - .recent_work__column__w2:hover p{display: none;}

Option 3 - .recent_work__column__w2:hover p{transform: scale(0);}

 .recent_work__column__w2 { width: 262px; height: 320px; background: red; display: block; text-decoration: none; transition: 0.3s; } .recent_work__column__w2 { width: 262px; height: 320px; background: red; display: block; } .recent_work__column__w2:hover { width: 262px; height: 320px; background: green; display: block; } /*--- #1 --- */ .recent_work__column__w2:hover p { opacity: 0; } /*--- #2 --- */ /*.recent_work__column__w2:hover p{ display: none; }*/ /*--- #3 --- */ /*.recent_work__column__w2:hover p{ -webkit-transform: scale(0); transform: scale(0); }*/ 
 <div> <a href="#" class="recent_work__column__w2"> <p class="recent_work__column__title">Brand</p> <p class="recent_work__column__tagline">tagline here</p> </a> </div> 

     .recent_work__column__w2 { width: 262px; height: 320px; background: red; display: block; } .recent_work__column__w2:hover { width: 262px; height: 320px; background: green; display: block; } .recent_work__column__w2:hover > * { visibility: hidden; } 
     <div> <a href="#" class="recent_work__column__w2"> <p class="recent_work__column__title">Brand</p> <p class="recent_work__column__tagline">tagline here</p> </a> </div>