CSS PLAY
Doing It With Style
The Starry Night (Dutch: De sterrennacht) is an oil-on-canvas painting by the Dutch Post-Impressionist painter Vincent van Gogh. Painted in June 1889, it depicts the view from the east-facing window of his asylum room at Saint-Rémy-de-Provence, just before sunrise, with the addition of an imaginary village.
It has been in the permanent collection of the Museum of Modern Art in New York City since 1941, acquired through the Lillie P. Bliss Bequest. Widely regarded as Van Gogh's magnum opus, 'The Starry Night' is one of the most recognizable paintings in Western art.
The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.
The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.
NO Javascript/jQuery/PHP or any other script language. JUST CSS.
FINALLY!! a simple method of having a slide up/down and cover/uncover without hacks or max-height.
I have recently been investigating the grid styles and came across the fact that the style 'grid-template-rows' can be transitioned. This led to the seeing that it is possible to transition from 'grid-template-rows:0fr;' (equivalent of height:0;) to 'grid-template-rows:1fr;' (equivalent of height:auto;).
With a little trial and error I also found that using 'align-self:end;' it is possible to anchor the information to the top of the grid box to give a slide up/down effect.
So I think that this fixes all the problems that we have had over the last few years trying to transition from 'height:0;' to 'height:auto;'.
All done with a couple of styles.