Using Images to Enhance the CSS Hover Effect
Hover is one of the oldest selectors in the CSS family. While we are accustomed to believing that it only pairs up beautifully with a link, in fact it can be used on all elements in the interface such as buttons, SVGs, images, etc. The reason is simple and lies in its essence. To paraphrase the specification: Hover selects elements when the mouse cursor is placed over them. Therefore, whatever you want to select, it will be right there – like it or not.
And who doesn’t like it? The :hover selector allows you to make your website an informative and comfortable place for users. If you embrace its powers, you can easily:
- Give extra emphasis to specific elements by singling them out from the content flow;
- Display hints to clear up possible confusion;
- Enrich static content with exciting twists;
- Enhance the storytelling;
- Create a playground in the hero area, etc.
There are many ways to benefit from it. However, what has caught our attention recently is that developers are giving the banal, boring link hover effect a new life. The trick lies in using large images. While it may seem a bit outrageous at first sight, somehow they managed to make this approach look elegant, visually-interesting, captivating and bold.
Let’s take a look at some compelling examples of the effect in action.
Subsense
Subsense is a typical representative of this tiny, refreshing trend. The homepage of the Italian digital agency makes the most out of the minimalistic approach. The layout is conventional, whereas the graphical filling is scarce as ever. You’ll find here just several blocks of text, navigation and a ton of airy whitespace. However, the website is not boring.
On the contrary, it looks exciting and fresh. It welcomes online visitors with a list of works that occupy the lion’s share of the screen. Each name of a project is accompanied by a corresponding image that appears upon hovering. It is enormously big, so you will not miss it.
Note, the team focuses attention on their portfolio, making it the star of the show. And with all of that, they do not reinvent the wheel or use any modern animations. Everything is neat, clean, and just brilliant.
Mine Studio
The portfolio of Mine Studio is another characteristic example of how to employ the trend. While, at the same time, it demonstrates how the effect can be used to make minimalism work for you.
Here, the front page is almost deprived of content and visuals. It is just a single screen presentation; nevertheless, it serves its purpose perfectly well. The hero area is occupied by a text-based horizontal slider that has three levels. Each one features the titles of the previous works. When you hover the mouse cursor over the name, an image emerges. Even though it does not stretch from top to bottom like in the case of Subsense, it is certainly attention-grabbing.
Note two things here. First, each appearance of a picture is enriched with the popular ripple-styled transition effect that makes it look stylish and modern. Secondly, the name changes its color, adding extra focus to the selected element.
Even though the team maintains a plain look, the hero area does not feel simple. On the contrary, it feels top-notch.
Ada Sokol
The team behind the portfolio of Ada Sokol adopts the same approach.
This is another one-screen homepage in our collection. It is also spacious and very conservative with the content. There is only regular navigation. The favorite works are showcased as links. And, it is here where the magic happens.
The hover state triggers not just an appearance of the image but also a small trick with its display. The image does not just move around the space; it becomes distorted and leaves a trace of disfigured graphics. It is an unusual, yet winning way to draw attention towards the portfolio pieces as well as meet the current tendencies.
Nicolas Lanthemann / VLNC Studio
There are some more interesting examples where the image-based hovers are skillfully combined with motion tricks. Consider Nicolas Lanthemann and VLNC Studio.
In the case of Nicolas Lanthemann, the image does not just appear – it moves and swirls, grabbing your attention. Whereas the creative agency of VLNC has used the trendy technique in tandem with the mouse cursor. So, wherever the mouse travels, the picture follows it leaving a faded trace.
Language Keepers
If you think that this new trend affects only the hero areas, then you may be surprised that it can be found everywhere. Just look at Language Keepers.
The team that stands behind Language Keepers’ web design leverages this technique for improving the main menu. Much like in majority websites of these days, the navigation is hidden behind the hamburger button. When it is open, it takes up the entire screen. The menu is split into two columns.
Each link is followed by an image that says it all. So, whatever navigation item you target, you will get not just a short description at the bottom of the page, but also a visual aid.
Corphes
The team behind Corphes derives benefits from this solution in several places on the website. First, they have given the regular wheel-based list in the navigation a zest. Here, each link looks bold and informative.
Secondly, they have improved the exploration of the main content on the landing page. Thus, one of the sections includes blocks of text that are supported by images that show up upon hovering.
Conscious Hotels
Here you will find the trend used in the middle of the homepage. It is an old technique, yet the team has managed to twist it a little bit to save it from looking ordinary.
At first, you stumble upon the blank sections where the titles are masked to hint that there is something hidden inside. In this way, the team ignites visitors’ interest. After you hover the cursor over the box, the image reveals itself, supporting the title and its message. Simple, yet elegant.
Lecomte de Bregeot
Last, but not least in our collection is Lecomte de Bregeot. The key feature of this take on the trend is that the team employs videos instead of pictures, thereby extending the boundaries and showing us that we can use a different type of visual material.
Big Images, Big Impact
It is so exciting to see how creatives transform the time-tested and dull elements of the web interface into an extravaganza. Simple hover effects that usually play a supporting role for links now have the leading role these days. It proves once again that there is still room for experiments and enhancements.
The post Using Images to Enhance the CSS Hover Effect appeared first on Speckyboy Design Magazine.