[Solved] Two images fading on hover with text

[Steven]

I’ve been pulling my hair for the past day or so, and I’m not entirely sure whether or not this falls in the category of CSS or PHP.

Here’s what I’m trying to do:

I’m working on a WordPress theme, and have made a custom post type. Using Advanced Custom Fields I created two custom fields: base image and hover image. As the user adds a new custom post, she will also upload two images (a before and after image, essentially) to the post.

Now, on the archive page for this custom post type, each post will be displayed in its own card element. This card is basically just a <div class="card"> within a Foundation column, to make it responsive.

Here’s the markup I have so far:

`

“>

`

I haven’t been able to think of any other way to declare the uploaded base_image as the card’s background other than using an inline style (seen on the veteran-card div).

The part that is really giving me a headache is trying to figure out how to change the background image to the uploaded hover_image while the div is in a :hover state…

[Paulie_D]

Does it have to be a background image…seems to me that these images are actually content.

Perhaps layered/positioned divs with images might be better?

Frankly, though, this doesn’t strike me as a CSS issue per se…more of a PHP one.

I should also mention that a span is an inline element and shouldn’t contain block level elements like headers and divs.

I’d use div instead…valid HTML and all that.

[Steven]

I don’t think it necessarily has to be a background image. That was just my first thought, because the actual content (header and body text) is supposed to be displayed on top of the image. See example image: http://thate.me/cardexample.jpg

I have tried some experiments in codepen with layered divs including images: http://codepen.io/swthate/pen/gprXJK

I’m having trouble positioning the copy text “inside” or “on top” of the div containing the images. Also, when trying to change the base image’s opacity on hover it would obviously change the opacity of the copy in other iterations of the markup.

The hover effect doesn’t have to be an opacity change, either. It could be sliding out the first image, revealing the second image beneath it. But I had trouble with that, as well, particularly the image would visibly slide next to the second image and not “disappear”, and would only stay slid away as long as the mouse was following that image… hopefully that makes sense!

Thanks,
Steven

[Paulie_D]

Are these ‘cards’ going to be responsive at all?

I guess what I’me trying to figure out is…what determines the size of the card?

The image or the text?

Quick version

http://codepen.io/Paulie-D/pen/XbdBwm

[Steven]

Yes, the cards will be responsive. Essentially they will be nested inside a Foundation column like <div class="large-4 column">, with a height of 460px or so declared in the CSS.

That pen is pretty much exactly what I was looking for… Thank you!!

[Author]

Posts