Add transparent layer and text on hover

[cwctroy]

I’m trying to make it so that when you mouse over an area on the screen, the background image gets darker and text appears. I currently have a column with a background image and a text element on top of that. I added a class to the text and the following CSS

.my-image-class:hover {
content: url(my.image.jpg);
z-index: 999;
width: 100%;
display: inline-block;
}`

The issue is that it completely replaces the background image and puts in a poorly formatted version of the image.

1. How do I format the image so that the hovering image has the proper dimensions?

2. How do I make the content text instead of an image?

[thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[cwctroy]

test.worldhorizonsusa.org

I want the squares with all the region names to each link to a separate page.I also want the background to fade and the text to only appear when hovered over.

[jade]

Hi there,

Please add a class to the column that contains the text then add this code in the custom CSS (assuming that the class you have added is hover-effect )

.hover-effect .x-text {
    visibility: hidden;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.hover-effect:hover .x-text {
   visibility: visible;
   background-color: rgba(0,0,0,0.4);
}

Hope this helps.