Your CSS had an issue because you were attempting to nest the div inside a class that had not been declared (.reasons). In addition to that, you should define the .community class within the nested div to separate the image in the code for better readability and ease of management. Then, simply apply the :hover event to the class so that when the mouse enters the area, it will trigger the event and change the background.
Below is a snippet for a clearer view of the code and how it functions:
.community div {
width: 100%;
height: 99px;
margin: 10px auto 5px auto;
background-image: url("http://www.f-covers.com/cover/cute-baby-kitten-facebook-cover-timeline-banner-for-fb.jpg");
background-repeat: no-repeat;
background-size: contain;
transition: all 0.5s ease;
}
.community:hover div {
background-image: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/cats/lovely-american-shorthair-kitten-website-header.jpg");
}
<div class="col-lg-3 community">
<div></div>
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Also, you do not need to specify a nested class when working with general styles. Since .community is nested as a sibling with .col-lg-3, you can use either to modify inner styles, as demonstrated in the snippet above.