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 sometimes the outcome is interesting 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

side notes.

HTML/CSS only

On this page I have placed a number of expandable containers in the main column. This is genuine “CSS Sledgehammer” technique, and the expansion of these containers is therefore controlled by CSS – no Javascript involved.

The solutions presented contain no surprises, or at least there are no planned surprises here. It is all quite simple stuff that anyone familiar with web design can put together.

It is all about coming up with an idea, and then realize it with regular markup and style. Turning ideas into reality is what I have been doing all my professional life, and the world wide web is well suited for such activities.

two forms for expansion

1a: toggle…
When expanded, the container overlays this side column. So obviously it can not be left permanently in the expanded state. In this demo an input type=check acts as toggle-switch to expand the container to full width, and then minimize it again when access to side column is needed. The visual “button” is styled to show state.

1b: toggle…
The input type=check toggle-switch can be styled to cover the entire expanding container, and thereby eliminate the need for a visual “button”. This will work fine for expanding single images. Such a “cover” will however make it pretty difficult to interact with and “flip sheets” in a sketchbook, so I have left out that method here.

2a: hover…
Expansion can of course also be controlled by :hover – hovering over the container itself that is. In this demo I have included “expand on :hover to demonstrate the effect, in that the container “expands half way” (does not cover the entire side column) when hovered over.
The “expands half way” limitation is set to make the differences between the toggling and hovering clearer on this demo-page. Besides, I kind of like it that way.

2a: active…
A (sometimes useful) variation is to use :active to trigger expansion. Same “half way expansion” but less disturbing triggering than using :hover. This method works fine for expanding single images, but not for much else as it makes interaction with elements inside the expanding container quite difficult.

demonstrating variants

Normally both forms for expansion are not needed, but for completeness I have included three variants on this page – see: demo-numbers.

combined :hover and toggle variant.
toggle only variant
:hover only variant
:active only variant

To choose behavior for these variants, two extra classes can be applied to the .expand container. Default is “full expand toggle”, and that's the expand variant I prefer.
The .onhover class introduces the “expand (half way) on hover”, and the .onhoveronly classdisables the toggle-switch so :hover becomes the only option.

Note that the “full expansion” has steps on screens / windows wider than about 1200px. That is because my page layout does not expand main column with the actual page-width above a certain width – to keep length of text lines within reasonable values. Thus, one set of percentages for fluid expansion with the page-width itself, simply won't work in this layout of mine.

A series of @media query steps up the expanding container width and its left margin to fit the actual page width better. These steps are a bit wide in this demo, and I haven't bothered to put in more and narrower @media query steps.

In time it may be possible to use calc() for fluid optimization, but for now the @media query steps will have to do.

controlled overlay

The expanding container overlaps the side column, and can also go over the page-edges at both sides on the widest screens. As it expands it pushes content following it in the main column down – clearly it isn't an absolute positioned expanding container.

The “controlled overflow / overlap” effect is achieved by defining the expanding container as float, and manipulate its margin along with its width. This method has worked well in the past, and will continue to work well in the future.

the sketchbook

The sketchbook in demo 1, is taken from the “fat footer” demo. It works like in that page, apart from that I have not included the “open panel” function.

The sketchbook is still at an early stage of development – version 0.6, and is not yet optimized for narrow screens. The visual “flip page” markers do for instance not scale, so they may appear awfully large and cover up too much of the actual content (those images) on narrow screens.

The image series in demo 2 is taken from a page about my favorite club in the US, and the images in demo 3 and demo 4 comes from the sketchbook – saving on load-time by reusing those last two images.

what about those cell phones?

The entire layout becomes serialized on screens / windows from about 640px in width down, and the container expansion demo'ed and described on this page is non-functional on such narrow screens.

I have written an article about the “logical split” solution I use to style for regular screens as well as mobile devices on this site.