full-width overlay

exploiting available space.

The images in the sketchbook below all have an inherent width of 1200px. As the main column in this layout only have space for images up to about 680px in width even on the widest screens, wider images will be compressed.

As I do not want to change the basic layout behind this site, I had to come up with simple ways to expand content-containers at will in order to present large images and other types of content that need maximum space.

This is how my expanding containers came about. And, as “one size fits all” usually means that it doesn't fit anything properly, several versions and variants got tested. A few somewhat OK solutions was then packed together and presented here.

Note that the stylesheet for this exploit has a few more “!important” than most might like, and quite a few more than absolutely necessary.
That's what you get when you load new stuff on top of existing stuff and won't bother to go through every single stylesheet on site looking for conflicts.

NOTE also that the expanding containers have almost no default visual styling, as I don't want to “lock them in” to a predetermined look on every page they may be used on. The appearance – background and borders and such – is added for each case via microtuning™ classes.

The demos below are working as intended in my browsers. I have not included vendor-prefixes for transitions, so older browser versions relying on those may show a “jumpy” behavior.

demo 1: hover + toggle

1: red velvet.

A plant observed on one of the many rest areas along the US highways.

2: citrus reflections.

Old orange tree in my front yard.

3: farm life.

Sundown over our Norwegian farm.

4: artificial standoff.

Plants and constructions.

5: by night.

After midnight on a rest area.

6: dry lake.

Signs of a very dry winter and spring in Florida.

7: sandy neighborhood.

Five minutes walk from the house.

8: roses are red.

Short blooming period.

You can :hover on it and flip between the eight “sheets” with images and text on them in the “half-expanded container”. The last selected “sheet” will stay on top until the page is reloaded.

If “half-expanded” isn't large enough for you, you can “maximize” the container to about full page-width by toggling the switch-button above the container. You can “minimize” the container again when you like.

multiple images

The expanding container may for instance be utilized for spreading out a series of pictures.

demo 2: toggle only

Since the Expand function is totally independent of its content, any content can go here. May not make sense to let text-lines become too long though.

Thus, to make sure the text-lines are kept short enough to be easy to read while use of space is optimized, the width, max-width and min-width of paragraphs are fixed to “reasonable values” when container is expanded.

To cover all possibilities, all text-containing block elements should be included in the line-length control.

This container doesn't react on :hover, only to the “maximize / minimize” button.

large single images

demo 3: hover only

The “:hover only” solution may be alright for presenting larger images, as the one above. The risk of accidental triggering is of course high.

demo 4: active only

The “:active only” solution may be alright for presenting larger images, as the one above. Lesser chance of accidental triggering than with :hover.

can always find an excuse…

An excuse can always be found for releasing another web design solution to a problem nobody has. Fact is, I have never needed an excuse for playing around with HTML and CSS, and some­times the outcome is inter­esting enough for release.

Right now I have very few ideas what to use this for, beyond what the demos above shows. But, as with so many things web, it may come handy one day.

Took a lot longer to write the text on this page, than to write the stylesheet behind the expanding containers. This despite the fact that I did not focus on writing clean and minimalistic CSS – what matters is that it works as intended across browser-land.

Come to think of it, the expanding container may work equally well, or better, for presenting larger pictures and stuff residing in the side column – expand in the opposite direction that is. File-size is the same no matter where large images resides, and the effect is greater.

Anyway, this web carpenter is happy with the concept as such, and the fine-tuning of design, markup and styles can wait. Can only set aside so much time for private projects of this kind these days.

sincerely  georg; sign

Hageland 30.may.2015
last rev: 16.nov.2017

www.gunlaug.com advice upgrade advice upgrade navigation