Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Responsive side-by-side images with overlay text when hovering

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


I'd like to have a header and then three images side-by-side. When in small screens, the images should occupy all the width and be placed vertically one after another.

For each image, when the mouse is over it, some text should be overlayed. For mobile and touch screens, I don't know how that text could be shown, but would like to have it shown in some way.

Each of the images should point to another html page (not shown in my example.

What I managed to do until now is:



I'd appreciate some help on this.
 
Sheriff
Posts: 67620
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Without diving deeply, your CSS seems way over-complicated for what's being asked. And never use `float` unless you really, really need to. And this is not one of those need-to cases. Some simple flexbox directives should achieve what you are after.

I'd strip all the CSS that's trying to do the positioning and refer to The Complete Guide to Flexbox for guidance in laying out your images.
 
WHAT is your favorite color? Blue, no yellow, ahhhhhhh! Tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic