▼
Streaming live at 10am (PST)

How to create Hover State on Image with using img tag instead background image?

#1

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?

Please advise.

#2

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.

closed #3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.