Only one custom hover class?

[cwctroy]

I’m trying to have a hover effect for each of my ten images on my site. I’ve created two and it seems that whichever effect I put first in my custom CSS works but the next one does not. Can I only have one custom class in my CSS?

My website is test.worldhorizonsusa.org

My CSS is this

.middle-east-hover:hover {
content: url(http://www.test.worldhorizonsusa.org/wp-content/uploads/Middle-East-hover.jpg);
z-index: 999;
width: 100% !important;
padding 0;
}`

.north-africa-hover:hover {
content: url(http://www.test.worldhorizonsusa.org/wp-content/uploads/North-Africa-hover.jpg);
z-index: 999;
width: 100% !important;
padding: 0;
}`

[jade]

Hi there,

The code should work find but there seems to be some errors in the CSS code in the customizer which is causing the issue.

Kindly copy and paste the entire code you have here and it should let you know about the CSS errors.