<body>
  <div class="hover">
    <p><strong>Headling</strong></p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia quam vitae consequatur qui, placeat minus. Fuga totam ex modi laboriosam aperiam accusamus quo cupiditate quasi, ut odio recusandae. Assumenda, repellat.</p>
    <a href="">Read More</a>
  </div>
</body>
.hover{
border:2px solid blue;
background:white;
font-family: Arial;
text-align:center;
width:300px;
height:210px;
margin: 0 auto;
transition:0.3s;
}
.hover a{ 
border:1px solid blue;
padding:10px;
text-decoration:none;
color:blue}
.hover:hover{
background:blue;
}
.hover:hover > a {
background:blue;
color:white;
border-color:white;
}
.hover:hover > p {
color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.