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.

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.

Animated Blurred Gradients

Blur effects can turn a bold design into something subtle. This animated background is a prime example. It could be overwhelming without the effect. Add some blurriness, and it becomes a bit player in the scene.

See the Pen Blurred animated gradients by Wil van der Tuin

CSS Text Transform with Blur

Here’s a unique way to create a spooky atmosphere. The text is initially presented at an extreme angle and is partially blurred. As you scroll, both the angle and degree of blur are increased. The CSS transform property is used to great effect.

See the Pen text-transform-and-blur by Ambika Castle

Glitched & Blurred CSS Worms

This animation is reminiscent of looking at bacteria through a microscope. Tiny “worms” jitter their way along the screen. The combination of blur and glitch effects makes it all the more realistic. You might want to wash your hands after watching this one.

See the Pen Worms by Fabio Ottaviani

Pure CSS Blurred Video Background Login Box

In this example, a blur effect is used to create a retro look. A CSS filter is applied to the video background. It adds to the aesthetic while also allowing the login box to take center stage.

See the Pen Pure CSS Blurred Video Background Login Box. by Lokesh Suthar

Interactive Dynamic Depth of Field Blur Effects

This depth-of-field presentation demonstrates the power of blur effects. Hover over a playing card and see it come into focus while the others are blurred into obscurity. The 3D look is something to behold.

See the Pen Interactive dynamic depth of field by Thomas Trinca

Blurred VHS Text Effect

If you came of age during the 1980s, you’re probably familiar with VHS tapes. Blurriness came naturally to these relics of the past. Here, the effect is recreated with CSS and JavaScript.

Note: This animation contains strobe effects – please use discretion when viewing!

See the Pen VHS text by Maria

Animated Blurred Loading Dots

This relatively simple loading animation has a secret weapon. As each sphere bounces towards us, it becomes blurry. It’s almost as if the objects were getting a little too close for comfort. The effect adds an element of surprise.

See the Pen Loading Animation by Prathamesh Koshti

Slick Slideshow with Blur Effect

Here’s a way to dress up a slider without resorting to massive images. This snippet creates a duplicate of the current image and places it in the background. From there, a heavy blur effect is added to compliment the aesthetic.

See the Pen Slick Slideshow with blur effect by Fabio Ottaviani

Bringing a Fresh Perspective to Design

Blur effects are a great addition to any designer’s toolbox. For one, they’re extremely versatile. You can use them as a background piece. But they’re also able to play a more prominent role.

Even better is that you don’t need to be an expert photo editor. Code can satisfy most use cases. For example, CSS has the blur() function built right in. And effects can even be applied to background elements.

Further, JavaScript can help take these effects to the next level. Animation libraries like GSAP offer a ton of flexibility.

More CSS Effects

The post 8 CSS & JavaScript Snippets for Creating Blur 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.

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.

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.

CSS Grid Tools

These tools will allow you to construct grid CSS layouts quicker. They offer interfaces for defining columns, rows, and areas, making layout adjustments straightforward and code generation instant.

CSS Animation Tools

These CSS animation tools offer user-friendly interfaces to define keyframes, animation timing, and other effects, enhancing user engagement without needing JavaScript.

CSS Spinner & Loader Tools

These tools offer various types of copy and paste spinners and loaders that can be easily integrated into your web projects to maintain user attention during loading periods.

CSS Box Shadow Tools

These tiny tools will help create depth and emphasis on elements through shadow effects. With easy-to-use sliders and color pickers, these tools will generate the CSS code for soft shadows, glows, and more.

CSS Image Filter Tools

From blurring and color adjustments to custom filters, these image filter apps provide live previews and code snippets for enhanced image styling.

CSS Background Generators

These tools allow for the creation of animated and dynamic backgrounds. They offer options for gradients, images, and videos, enriching your web designs with backgrounds that can be static, animated, or interactive.

CSS Pattern Tools

These tiny tools specialize in generating repeatable, tileable patterns for web backgrounds. With options for shapes, colors, and level of complexity. They will provide unique ways to fill background spaces with visually appealing designs.

CSS Gradient Tools

Quickly create smooth and seamless gradients with these tools. They provide interfaces for radial or linear gradients, allowing for the customization of direction, color stops, and opacity for vibrant backgrounds or element fills.

CSS Generators

These tools are quick and efficient ways to produce ready-to-use CSS snippets for multiple design needs.

CSS Color Tools

Copy and paste palette generators, color pickers, and tools to ensure color harmony and contrast and help select complementary colors for cohesive designs.

CSS Typography Tools

These simple tools focus on text and readability. They allow for the manipulation of font sizes, line heights, and spacing, providing previews and code for typographic perfection in web design.

CSS Icon Tools

From generating icon fonts to SVGs, these tools simplify the process of integrating and styling icons, ensuring crisp, scalable graphics across devices.

CSS Quality Checkers

These tools will analyze and optimize your CSS files. They identify unused styles, redundancies, and potential improvements, helping to streamline stylesheets for faster load times and better performance.

Web Accessibility Tools

These tools ensure web content is accessible to all users, including those with disabilities. Recommendations for improvements to enhance usability for everyone.

Interactive CSS Learning

Through exercises, tutorials, and live coding environments, you can learn more about CSS properties and best practices in a practical, engaging manner.

Generate Code Screenshots

Ideal for tutorials, blogs, or documentation, these tools stylize code for readability and aesthetic appeal, supporting various programming languages and themes.

The post 100 Tiny CSS Tools & Apps for Web Designers 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.

Beautiful CSS box-shadow

The CSS box-shadow property is incredibly flexible – and this snippet is proof. With 90+ examples of different effects, you’re sure to find one that suits your needs. Bookmark this one as a handy reference.

See the Pen Beautiful CSS box-shadow by Airen

Error 404 Page Design for Bootstrap

This 404 error offers a unique take on shadowing. It combines CSS transforms and absolutely-positioned elements to create a skewed look for each container. The result is a cool aesthetic with a standout visual flow.

See the Pen Error 404 Page design BOOTSTRAP by Ahmed

Strokes, Shadows + Halftone Effects

The creative use of shadows can take your work to some fun places. Here, they’re utilized to craft a selection of offset looks, including halftone SVG patterns. They create a lighthearted mood that would fit in nicely with features such as page titles and hero areas.

See the Pen Strokes, Shadows + Halftone Effects by Mark Mead

Netflix style text animation with CSS

The “Netflix” effect seen here includes an iconic long shadow that disappears into the final result. It’s a relatively basic CSS keyframe animation, yet makes a bold impact – just like the opening of your favorite shows. Even better is that you can customize the text right from within your browser.

See the Pen Netflix style text animation with CSS by Nooray Yemon

Neon text-shadow Effect

We tend to see shadows used to create contrast – that’s not the case here. Instead, the text-shadow property provides these characters with a neon look. Add in a bit of animation and you have an attention-grabbing headline or logo.

See the Pen Neon text-shadow effect by Erik Jung

Animated CSS Mail Button

Shadows can also be used to enhance lighting effects, much like we see with this envelope. Hover over the object and notice how the perspective shadow shrinks as the envelope moves closer to it. While it’s not the main attraction, it certainly adds a touch of realism.

See the Pen Animated CSS Mail Button by Jake Giles-Phillips

Layered text-shadow effect CSS

Among the hidden tricks behind text-shadow is the ability to layer shadows – all within the same property. In all, there are a whopping nine layers used to create this multicolored 3D text. And while this snippet has a cool retro vibe, there are plenty of additional possibilities.

See the Pen Layered text-shadow effect CSS by Shireen Taj

Shadow on Shape

Adding a shadow to a non-rectangular shape may not seem like a big deal. But it wasn’t always possible on the web. Here, Chris Coyier demonstrates that, by using the CSS filter property, we can create a shadow that perfectly follows along the path of a custom shape.

See the Pen Shadow on Shape by Chris Coyier

Step into the Shadows with CSS

Yes, the classic drop shadow is alive and well. But, thanks to CSS, so are a variety of other shadow effects. This means that you can create something truly unique without leaving your code editor.

Whether you’re looking to add a subtle touch of class or something more extreme, the snippets above can show you how to make it happen. And it may be easier than you think.

More CSS Effects Snippets

The post 8 CSS Snippets That Demonstrate the Power of Shadow 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.