Without needing to install anything, all you have to do is bookmark, and save them for that day when required.

From assessing your website’s accessibility to generating sophisticated flexbox or grid layouts, refining typography, choosing the perfect color scheme, copying and pasting CSS animations, to beautifying code screenshots, this collection covers a broad range of web design needs.

No matter what kind of CSS time-saver you’re searching for, you’ll likely find it here. Keep these tools at your fingertips to make your CSS workflow quicker and that little bit easier.

The post 100 Tiny CSS Tools & Apps for Web Designers appeared first on Speckyboy Design Magazine.

However, many website owners overlook the potential of customizing excerpts for style and functionality. When done correctly, custom excerpts can enhance the appearance of your website’s homepage and also provide additional utility to your visitors.

We have curated a collection of ways to improve excerpts beyond just a simple piece of text on your homepage. The following CSS and JavaScript snippets include creative ways to improve the appearance and functionality of excerpts. These custom excerpts can add a touch of professionalism to your website and make it stand out from the crowd. Let’s dive in!

Excerpt Tabs

When space is limited, this tabbed navigation example could be of great use. Think of it as a way to showcase posts from specific categories. The way it’s currently set up, you’ll get just one post per tab. But with a little creative coding, you could make each tab home to, say, the top 5 posts from each category.

See the Pen Simple Tabs Widget by Kevin Lesht

Scroll to Full Article

One trend we’re seeing is using excerpts on an article’s page itself. Here we have a snippet that displays the excerpt upon the page’s loading. Then, scrolling reveals the entire article below.

In this case, the user’s viewport is detected via JavaScript and is used to display the article at a specific point during the scroll. This enables the use of some fancy special effects.

See the Pen Element Viewport Detection by Ryan Altvater

It’s All in the Card

Content cards have turned into a very popular way to display a list of articles. Design-wise, they can be very organized and compact. They also provide a nice visual separation between posts – making for easier reading.

What’s interesting about this example is that, instead of linking to a full post on a separate page, this card allows you to read the entire article right within the same container. The use of the scrollbar makes this extra handy. This one’s probably best for shorter content.

See the Pen Article Card UI – Read More CSS Animation by Kitsune

CSS Reveal

The right image can certainly serve as a useful way to provide readers with a hint as to the contents of an article. If your site has a focus on using featured images, this example might be right up your alley.

It uses pure CSS to reveal a text excerpt as the user hovers over an image/headline card. This won’t work for every site, but it adds a nice bit of interactivity when paired with great imagery.

See the Pen Text Overlay Using CSS Transitions by Mack Richardson

A Revealing Perspective

A different take on the hover reveal can be found in this example. Rather than the multi-column card layout, this resembles more of a traditional blog. The advantage here is that it allows for larger headlines and can handle excerpts of various lengths.

See the Pen Article list concept with background image by Michal Niewitala

Full Screen Intro

This example targets an article’s page and provides a full screen to show off a title, excerpt, and featured image. Scrolling down then reveals the full article. This could add a nice touch to long-form content.

See the Pen Article Intro Effects by Romswell Roswell Parian Paucar

Stand in the Spotlight

At first glance, the excerpts below look nice enough. But hovering over an article is where the real magic happens. The chosen article’s container expands, while a dark background mutes the others in the listing. What a great technique for making content stand out.

See the Pen Reveal article display by JL

More Than Words

The examples above are proof that excerpts don’t have to be boring. They can become an asset in both UX and your overall design. With a bit of creative thinking, you can add some extra layers of interactivity and tempt users to keep on clicking.

The post 7 CSS Snippets for Creating Stylish Content Excerpts appeared first on Speckyboy Design Magazine.

It’s also a feature that inspires a high level of creativity. That makes perfect sense, as the ability to present images uniquely helps you stand out.

Web designers are taking advantage. They’re using the latest CSS and JavaScript techniques to create abstract layouts and compelling special effects. Everything from enhancing the basic grid gallery to otherworldly user interfaces is being developed.

With that in mind, here are eight unique photo galleries to help inspire your next project.

CSS Animated Mini Photo Gallery

Size is the standout feature of this photo gallery snippet. Traditionally, galleries tend to take up large portions of our screens. This “mini” gallery turns that practice on its head, with animated transitions packed into a tiny space. And it requires zero JavaScript!

See the Pen animated Mini Photo Gallery by Alvaro Montoro

Sliding Image Track with CSS & JavaScript

This gallery also makes efficient use of space while adding interactivity to the mix. Swipe the gallery horizontally to both reveal images and experience a cool parallax effect. The whole presentation is attractive but subtle.

See the Pen Sliding Image Track by Hyperplexed

Accordion CSS Image Gallery

Accordion UIs are incredibly flexible. Sure, they can hold plain text content – but where’s the fun in that? We’re starting to see them used more for multimedia, as is the case with this silky-smooth gallery.

See the Pen Accordion Image Gallery by Stefan C.

Hexagon Gallery in CSS

How about going beyond basic squares and rectangles? Thanks to features like CSS -clip-path, all kinds of interesting shapes are possible. Here we have a beautiful hexagonal grid with some slick hover effects added in for good measure.

See the Pen Hexagon Gallery by Gabriela Johnson

Responsive CSS Photo Gallery Grid with Lightbox

Adding a lightbox to a gallery has traditionally required JavaScript. That’s no longer the case, as this responsive snippet displays full-sized images via CSS. In addition, the use of CSS grid and flexbox makes for a gorgeous masonry layout. There’s a lot to like here.

See the Pen Responsive Photo Gallery Grid with Lightbox and – No Script by Majed

Layered Horizontal Scroll Gallery with CSS

Check out the stunning level of detail in this horizontal gallery. Each image is carefully layered, with various opacity levels creating a seamless look. Hovering over an image reveals its full-color view, while scrolling unlocks animated transitions.

See the Pen Horizontal Scroll Gallery (Locomotive Scroll) by Ivan Bogachev

Flex Image Gallery with Hover Effect

Perfect for portfolios, this gallery uses Flexbox to power a full-width masonry layout. Captions are revealed upon hovering, as is the image’s true color. And each image can be hyperlinked so visitors can learn more. It also adjusts beautifully to smaller screens.

See the Pen Flex image gallery with hover effect by Cynthia Costa

Puzzle Grid Gallery

Here’s another example of a gallery that takes the idea of shape to another level. Hover over an area of this puzzle to reveal the full image. Given the level of visual complexity, it’s also impressive to see that this snippet still works well on mobile devices.

See the Pen Puzzle Grid Gallery by Goran Rakic

Photo Galleries as a Work of Art

There’s nothing wrong with a basic photo gallery. But there are also times when it pays to kick things up a notch. The snippets above are perfect examples.

Artfully presenting images entices users to interact. And it doesn’t have to come at the cost of performance, thanks to modern CSS and JavaScript. Nor does it mean a clunky mobile experience. Galleries can maintain their looks and functionality across screens.

The post 8 CSS & JavaScript Snippets for Creating Photo Galleries appeared first on Speckyboy Design Magazine.

Crafting this look used to require photo editing software. But that’s no longer the case. You can add stunning blur effects using CSS and JavaScript. And it’s easier than you may think.

There is also a wide array of possibilities. You could opt for that simple blur on a photo. But you can also combine the effect with animation and user actions. This allows you to add some creativity to the mix.

With that in mind, let’s explore eight excellent examples of CSS and JavaScript blur effects in action.

The post 8 CSS & JavaScript Snippets for Creating Blur Effects appeared first on Speckyboy Design Magazine.

CSS blend mode is one such revelation. It allows elements to display colors from both the foreground and background layers. This works in much the same way that Photoshop blend modes do – making for some interesting effects.

While browser support is not 100% as of this writing (thanks for nothing, or almost nothing, Microsoft), designers are already exploring what can be achieved with blend modes. Here’s a look at some of the more exciting examples we found.

See the Difference a Blend Can Make

Let’s start off with this handy demo, which shows what each blend mode does to a background image. Use the drop-down menu and see how various modes affect the display. The amount of variation might surprise you.

See the Pen CSS Blen Modes by Tyler Duprey

Themed Background

Here’s a practical usage of CSS blend modes. Select a photo within this gallery, and it shows more than just the full-sized image. You’ll also find a blended and blurred version of the image in the background, making for a more immersive experience.

See the Pen Themed, CSS blended background blur gallery by Paul Noble

Filter & Blend

The amount of potential image manipulation possible with CSS is kind of amazing. This tool offers visual proof, letting you adjust the base/mid/highlight effects and the colors used. The result can be something that looks far and away different from the original.

See the Pen Filter + Blend Modes Demo by Chris Johnson

Small Code, Big Results

This carefully blended photo offers a solid example of what can be accomplished with just CSS. What makes it all the more impressive is that the style sheet is a mere five lines in length. It’s a matter of setting up a photo background, adding a gradient, and finishing off with a blend. You can’t even create this effect in an image editor this quickly!

See the Pen CSS blend modes by Alvaro Felipe

Progressive Navigation

Blend modes can be used for more than just stunning image effects. Here, it’s used as a helpful microinteraction in a scroll-based navigation menu. Users can see the current chapter they’re reading based on the menu item’s color opacity. What’s more, the effect also indicates whether you’re at the beginning or end of a chapter. jQuery is a big help here as well, keeping track of scroll position.

See the Pen Progress Navigation using CSS Blend Modes by Michael Leonard

Double Trouble

The process of multiple exposure photography combines two images into one. The concept is used to great effect here, with a background photo being combined with an animated GIF to create something rather psychedelic. It also strengthens the urge to play some classic video games.

See the Pen double exposure using css blend modes by Pixelsonoro

Totally Rad Text

Combine blend modes with SVG text, and you can create some gorgeous effects. In this example, two layers of text are created. One has a fill color, the other an outline. They are then positioned offset from each other, leading to this compelling and functional look. It’s even responsive.

See the Pen SVG Blended Outline &amp:Text by Natasha Gonzales

A Seamless Rainbow

We’ll close out our collection with an example of how a little creativity can go a long way. This stunning rainbow of colors may look very complicated. However, it is actually made up of three fairly basic CSS gradients combined with a blend mode. Sometimes, simple really is better.

See the Pen CSS Blend Mode Background by Gemma Stiles

Stand out by Blending

CSS blend modes offer a nice change of pace for all sorts of design elements. While we may closely associate them with images, the examples above show some other effective uses as well. Items such as text and even navigation can benefit.

Even better is that they take a technique we’ve long seen in print design and have made it something we can easily implement on the web – no image editor required.

Take some time to experiment with CSS blend modes and see how they can enhance your next project.

The post 8 Code Snippets for Creating CSS Blend Modes appeared first on Speckyboy Design Magazine.

One area where hover effects can be especially powerful is when they’re applied to images. Whether it’s as part of a small card layout or a massive hero image, the right effect can make a huge impact.

Today, we’ll show you some creative ways that designers are integrating hover effects into images. They’ll demonstrate how we can spice up our own projects in a dramatic fashion.

Photo Effects on Hover

This clever use of CSS and JS duplicates the image and layers them on top of each other. From there, CSS filters are separately added to each image. This technique results in cinematic-quality effects that would be otherwise difficult to achieve.

See the Pen Photo effects on hover using JS and CSS3 by Alvaro Montoro

Fast and Powerful Image Effects

What’s great about this collection of hover effects is that they provide instant gratification. But that speed doesn’t take away their potency. Of particular note here are the CSS3 filter effects, as they bring sepia and grayscale images to full color upon hovering.

See the Pen Image Hover Effects by kw7oe

Image Hover with Slide Out Title

This combination of skewed caption containers, sharp typography, and quick animation is powerful. It’s also reminiscent of the opening credits to a TV show. Amazingly, the vast majority of the work is done by CSS alone.

See the Pen #1104 – Image hover with slide out title by LittleSnippets.net

Show Your Cards Image Effects

Here’s a snippet that brings to mind someone unfolding a hand of playing cards for all to see. But in this case, it seems like it would be a perfect hover effect to implement for photo galleries. It not only looks cool, but it also provides some context for users.

See the Pen Image Hover Effect – CSS3 by Bruno Rodrigues

Shifting Reality Image Hover Effects

Go ahead, play around with this example and see if you can keep your vision straight. As you hover over various parts of this building, blocks shift and scroll based on your cursor direction. It’s highly detailed, confusing, and mind-blowing all at once. Can we do it again?

See the Pen Image Hover Effect by Dimitra Vasilopoulou

Split Image Hover Effects

Want more mind-blowing fun? Here’s another example from Dimitra Vasilopoulou, who also created the reality-shifter above. Here, the photograph appears to be split up within a grid layout. Hovering quickly puts it all back together. While it’s not quite as psychedelic, it’s no less impressive.

See the Pen Split Image | Hover Effect by Dimitra Vasilopoulou

Pure Class Image Effect with Pure CSS

This collection of hover effects proves that you don’t need to be over-the-top to make a strong impression. There are various style options here, but each brings the reveal text content and filters upon hovering. And, not a single line of JavaScript was used.

See the Pen Awesome Image Hover in Pure CSS by MAHESH AMBURE

Key(frames) to the Wild

We’ve come to the intersection of drama and beauty with this incredible CSS “shutter” effect. Hovering over these sepia-toned animal illustrations creates an ultra-smooth transition to full-color. It was accomplished via CSS filters, keyframes, pseudo-elements, and opacity changes.

See the Pen Animation @keyframes in Image Hovers by Vail Joy

The Bigger Picture Image Hover Gallery

Photo galleries are so widespread, yet you don’t see many that are truly unique. Here is a stunning exception. Hover over a thumbnail image in the grid, and a full-sized version takes over the entire container. But that’s only half of the story. The real cool factor comes from the image “splitting” itself and being put back together as it loads in.

See the Pen Splitting:Image Hover Gallery by Shaw

Split Image Reveal Effect

Here we have a fun technique for revealing text behind an image. This snippet shows various ways to “split” an image into strips, thus clearing the way for a secret message. Since it’s a bit complicated, it may not be something you’d want to use repeatedly on a page. But, with the right implementation, you’ll add a creative flair to your project.

See the Pen Fancy Image Splitting (SplittingJS) by Mark Mead

We Have the Drama

Adding dramatic hover effects to your site is a great way to grab a user’s attention. What the examples above show is that we can achieve the desired results without going overboard. You don’t need something loud and obnoxious in the least. Rather, it’s all about smooth transitions and compelling special effects.

Let these examples inspire you. Then, experiment with ways to add some drama to your own images.

The post 10 CSS & JavaScript Snippets for Advanced Image Hover Effects appeared first on Speckyboy Design Magazine.

That’s great for adding some basic effects to your text and containers. But it’s also possible to go above and beyond. With CSS, you can create some seriously impressive shadows that rival those found in tools like Photoshop.

These effects help elements stand out while providing depth and visual perspective. It’s amazing what a little bit of shadowing can do for a design.

We scoured CodePen to find prime examples of CSS shadow effects in action. Here are some top snippets that cover both everyday sensibility and jaw-dropping complexity.

The post 8 CSS Snippets That Demonstrate the Power of Shadow Effects appeared first on Speckyboy Design Magazine.

From blurring to color adjustments and adding shadows, they can enhance the look and feel of your photos and web elements, making them more engaging.

This article is a curated collection of CSS filter resources, including CSS filter libraries, JavaScript plugins, web-based apps, and tutorials.

You might also like these toolboxes: CSS Flexbox, CSS Animation, Styleguide Tools, or Tools for Formatting CSS.

CSS Filter Libraries

Collections of pre-designed libraries and classes that you can use to apply various CSS filter effects to photos or any web element.

CSS Filter JavaScript Plugins

These plugins will extend CSS filter capabilities, allowing for more dynamic and interactive effects through JavaScript integration.

CSS Image Filter Web-Based Apps

Web-based tools and applications where you can experiment with filter effects and generate CSS code in real-time.

CSS Filter Tutorials & Guides

Educational resources, guides, and how-to articles focused on teaching you how to create and implement CSS filter effects manually.

• CSS filter on MDN
  Detailed documentation on CSS filter usage and properties.
• Filters on web.dev
  Tutorials and best practices for using CSS filters effectively in web projects.
• Filters & Blend Modes for Beginners
  Beginner-friendly lessons on creating ‘magic’ with CSS filters and blend modes.
• How To Add Filter Effects to Images
  A tutorial from W3Schools for learning how to apply basic CSS image effects.
• Complete Guide to Using CSS Filters with SVGs
  Explore the integration of CSS filters with SVGs for advanced web design techniques.

The Simplest CSS Filter Tutorial

With just a few lines of HTML and CSS, you can quickly create a dynamic effect that changes a photo to black and white when you hover over it. This simple technique can add an engaging element to your web projects.

First, we need to set up the HTML structure. This will include just a basic container for our image. Replace your-image-url.jpg with the path to your image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Simplest CSS Filter Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="image-container">
    <img src="your-image-url.jpg" alt="Example Image">
</div>
</body>
</html>

Next, the CSS to style the image and apply the grayscale() filter on hover. Create a style.css file and add the following CSS code:

.image-container img {
    width: 100%;
    transition: filter 0.5s ease;
}

.image-container img:hover {
    filter: grayscale(100%);
}

The CSS does two things:

1. It ensures that the image fits within the container by setting its width to 100%.
2. It adds a transition effect so that the change to grayscale happens smoothly over 0.5 seconds when the mouse hovers over the image.

List of all the CSS Filters

CSS filters offer a range of effects, from color adjustments to blurring and shading. Here's a closer look at each filter:

• blur(): Adds a blur effect, simulating a lens out of focus. The intensity is adjustable in pixels.
• brightness(): Makes an image brighter or darker. Values over 100% increase brightness, while below 100% decrease it.
• contrast(): Enhances or reduces the difference between the darkest and lightest tones in an image.
• drop-shadow(): Applies a shadow behind an element, customizable in color, size, and direction.
• grayscale(): Converts an image to shades of gray, with 100% being completely gray.
• hue-rotate(): Rotates the hue of an image around the color wheel, measured in degrees.
• invert(): Inverts the colors of an image. 100% inversion swaps all colors for their opposites.
• opacity(): Adjusts the transparency of an element, with 0% being fully transparent.
• saturate(): Controls the intensity of colors, with values over 100% enhancing saturation.
• sepia(): Applies a sepia tone, making the image look like an old photograph.

The post CSS Filter Toolbox – Libraries, Web-Based Apps & Tutorials appeared first on Speckyboy Design Magazine.

Thanks to the latest CSS and JavaScript techniques, these effects are also dazzling web users. Everything from relatively simple reflection details to light-bending refractions is popping up on our screens. Even highly-realistic behaviors are possible.

Today, we’ll introduce you to some outstanding code snippets that bring mirror, reflection, and refraction effects to life. Let’s take a look!

Bonsai animation

This gently-animated bonsai provides a calming feel that belies the serious technology that makes it work. It utilizes SVG and the GSAP animation library to create a lovely water reflection effect.

See the Pen Bonsai animation by Kamil

PBR Reflection

Here’s a very unique snippet that features multiple effects. First, there’s a rotating shape that hovers in front of a mirror-like surface. Notice the shiny reflection underneath as well. The lighting and shading are gorgeous. You can also use your mouse or touch to change the perspective.

See the Pen PBR Reflection by ycw

Mirrored Light Orb Cursor Movement

This snippet is proof that mirror effects can be applied in unconventional ways. Two brightly-colored orbs appear against a black background. Move your cursor to take control of the left (white) one, while the other mirrors your movements. Dragging these orbs all over the screen in tandem is more fun than it should be!

See the Pen Mirrored Light Orb Cursor Movement by Diana Le

GLSL: Refracted rays

The color and texture of this animation are mesmerizing. Rows upon rows of spheres move toward you, while your cursor position changes the refraction index. The look ranges from glassy to old-school television static. HTML 5 canvas and JavaScript are used to create the ultra-smooth movement.

See the Pen GLSL: Refracted rays by Liam Egan

Pure CSS text mirror

Mirrored text is surprisingly easy to implement. With just a few dozen lines of pure CSS, you can achieve an attractive effect that is sure to grab a user’s attention. The secret is in the CSS transform property, which flips the mirrored version upside down. From there, a gradient is used to create a more realistic look.

See the Pen Pure css text mirror by Tim

Text Refraction

Add some custom text and this snippet will make it look as if it’s being viewed through a crystal ball. Cursor movements change both the perspective and size of the effect. When combined with the colorful background, the whole presentation has a 1960s vibe to it.

See the Pen Text Refraction by Juan Fuentes

Phone Reflection

Check out this abstract take on a modern obsession – staring blankly into your phone. Click on the phone and simulated text reflects slowly up the subject’s body. It’s similar to what you might see in a darkened movie theatre.

See the Pen Phone Reflection by luke lincoln

Three.js Reflection

Speaking of abstract works, this virtual game board is something to behold. Mirrored 3D balls roll around as light bounces off of them. You can also change the perspective of the scene, adding even more intrigue to the outstanding special effects. If astronauts play games in space, this might be the one.

See the Pen Three.js Reflection by seanwasere

Adding a New Perspective to the Web

Amazing as it may seem, developers are crafting some seriously stunning mirror, reflection, and refraction effects for the web. Not only do they look incredible, but many also make great use of physics to add a layer of realism as well.

The post 8 CSS & JavaScript Snippets for Reflection & Refraction Effects appeared first on Speckyboy Design Magazine.

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.