Hover text-color does not work

Hi all,

I got a weird problem. I’ve made some clickable links with background image and want to add some hover-elements but for some reason it does not work. I can change some features upon hover (add a border for example) but I cannot change the text-color.

Another problem is that now upon hovering the text automatically changes to black (I do not understand what is causing this in the first place). I can solve the problem by giving the a elements an ID instead of working with a class and then create an ID:hover {color: white;} but that is really inconvenient.

I am using the following (custom) CSS:

.postspreview {
float: left;
border: none;
padding: 80px 20px;
font-family: amatic SC;
font-size: 2em;
width: 800px;
height: 225px;
max-width: 100%;
background-size: cover;
background-repeat: no-repeat;
color: white;
opacity: 1;
}

.recentpost1{
position: relative;
background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Cusco-incawomen.jpg”);
}

.recentpost2{
background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Machu-Picchu-1.jpg”);
}

.recentpost3{
background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Day2-8.jpg”);
}

.recommendedpost1{
background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/06/Phu-Quoc-2nd-beach.jpg”);
}

.recommendedpost2{
background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/06/Angkor-gate-1.jpg”);
}

.recommendedpost3{
background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Day2-8.jpg”);
}

Can someone help me solving this? Thnx!

The page I need help with: [log in to see the link]