September 30, 2022

Two Column/Card Layout with Image and Text Hover – HTML & CSS – SitePoint Forums

Good morning!

I’m trying to create a hover image with text in the column/card next to it. I don’t know where I’m wrong, but every time I add the hover image to my 2 column card layout code, the text ends up below the image in the same column. Can anyone help me understand what I need to fix in my code? Thanks a lot!












First Grade Team

Get to know more about our first grade teachers

Avatar
Avatar

Card 2

Test text


There are a few bits of code that don’t make much sense, like 150% width on the container and then overwriting the column.
But I think the whole thing could be simplified by dropping the old float method and updating it with flex box.



2 likes

This is an example with flex.


Source link