A single level dropdown with top level rollover images.

Using CSS3 transitions to produce a smooth image enlarger.

A menu using the float/drop technique using background images with hover change and breadcrumb trail.

Another menu using the float/drop technique using total background images with hover change and breadcrumb trail.

Using the Fit and Shrink Technique to produce an image enlarger which does not need the image sizes to be defined.

How to style the background image using CSS3 to make it fit the container size.

Using CSS3 to produce a horizontal image slide menu to rival any javascript version.

Using just html and css with no extra markup to produce foreground png images

Using the no hacks float drop technique to produce an image dropdown menu with popup tooltips.

Using CSS3 to animate a set of thumbnail images.

Using CSS3 to produce an expanding stack of image links, suitable for the iPad etc.

Using CSS3 to produce a vertical sliding set of panels with menus.

Using the gerneral sibling selector to show enlarged sections of an image on hover.

Using CSS3 and the latest discoveries and techniques to have a click action image information panels.

Using an image to close any open sub menus on the iPad, iPhone and iPod Touch.

Using CSS to cycle though a set of images.

Using :before/:after and content: together with the general sibling selector to produce a CSS only gallery of 100 images with all the image information in the stylesheet.

An image enlarger with animation, title and descriptive text (which can contain links)..

A method of applying :focus to images.

A show/hide information panels using click to open and close.

Using CSS3 to 'animate zoom' a set of thumbnail images.

Using CSS3 to rotate a set of images.

Using css3 transitions to animate a slide/fly menu with image 'bounce'.

A simple image magnifier with a bounce animation.

A gallery of images on a grid with hover to zoom the images and partially zoom adjacent images.

Using :before/:after and content: together with the general sibling selector to produce a CSS only gallery with minimal code for the iPad etc..

CSS only gallery with permanent images, using no :target, iframes, objects or javascript.

CSS only gallery with permanent images, using no :target, iframes, objects or javascript, version 2.

Using a new technique to enlarge a section of an image.

Centering an image between two columns of text with wrap around

A left/right slider to reveal/hide an 'after' image with a hold feature.

A left/right slider to reveal/hide an 'after' image suitable for IE7+.

Enlarging a section of a smaller image by vertically scanning the smaller image.

A CSS only method of producing image reflections on solid background colors.

A method of getting IE7, IE8 and early version of other browsers to support 'background-size:cover'.

A responsive image map that works on touch screen devices including Android OS and IE10.

An html imagemap with hover effect for all browsers except IE which has fallback to a plain imagemap.

A CSS only method of toggling the zoom state of images. Works in all modern browsers including the Android browser.

A CSS only hover effect on an html imagemap. For Firefox, Chrome, Safari and Opera with fallback for IE7+

A CSS only method of containing a responsive foreground image in a fullscreen browser window without @media queries.

A CSS only method of covering a responsive foreground image in a fullscreen browser window without @media queries.

A CSS only responsive foreground image fullscreen slideshow with 'cover' and 'contain' images and no @media queries.

Using CSS shape to have text track the shape of images. For all modern browsers except IE and Firefox.

Increasing digitisation of society has enabled the study of collective... more

Knowing how to fan out images with Divi’s scroll effects can be a subtle and impressive design element to help promote an image gallery on a landing page. The idea is to engage users as they scroll down the page by fanning out images like a hand of playing cards. In this tutorial, we are […]

The post How to Fan Out Images on Scroll to Promote an Image Gallery in Divi appeared first on Elegant Themes Blog.

The first phase of the multi million pound development in Durham city is under way and is expected to take 18 months to complete

"The identification of this male is of vital importance to this investigation"

An overwhelming majority of websites incorporate the “hero image” design pattern. This is where a large, visually impactful image is used at the top of the page along with key messaging to emotionally engage the target audience. As one of the first elements one sees, the actual imagery used is often subject of attention during […]

The post Does the hero image matter? appeared first on Psychology of Web Design | 3.7 Blog.

Dazed Media a interrogé les créatifs et leur a demandé d’imaginer des affiches répondant aux changements provoqués par la pandémie et appelant à un avenir meilleur. Dans le cadre de cette campagne #AloneTogether, plusieurs artistes et designers célèbres ont contribué, tels que Vivienne Westwood, Christopher Kane ou encore la créatrice de mode Katharine Hamnett. Ces […]

Now that we have most of the basics of HTML and CSS in the browser, we’ve begun implementing new features that I would consider “quality of life” improvements, many of which have been inspired by mobile. One great example is the CSS prefers-color-scheme media query, which allows developers to cater their design to system theme […]

The post How to Display Mode-Specific Images appeared first on David Walsh Blog.