Is there a way to create a hover state over an image link (img tag) instead of over a background image (via CSS)? When I hover over the image I would like a color tint with some copy, is this possible in WF that generates a img tag with a scr location?
I am trying to tie this to CMS WYSIWYG editor, and I can’t make it work when I using a background image with a hover state that is embedded in the CSS. It would be a bonus if I can get hover state to be a img tag too, maybe use a transparent png as a hover state?
I’m tempted to ignore your question and focus on your goal instead.
To achieve that, you need a div, an image inside the div, then another div on top of the image and copy over this div. So, first create the final state. The first div must be position:relative, the image can stay as is, then the div inside the div must be position: absolute and 100% height and width, with the color background and opacity you want to tint your image, then put you copy inside.
From there, you can try opacity 0 on the second div and a hover state with opacity 100, + transition on the normal state.
Or you can rely on a :hover interaction to show/hide the colored div with copy.