Author
Chris Tremoglie
Minute
Read
Remember “The Blob,” the iconic sci-fi film from the 1950s? Well, it’s coming back. This time as a cool hover effect to implement in your website.
The Blob Hover Image wrapper allows you to add images to a menu item, or any other element, that only appear on hover. The images are masked by a custom shape that slowly rotates and sways for a compelling visual effect that will surprise and delight users. The effect is created in P5.js, but can be configured by simply using data-attributes on the desired items.
Take a look at the list container and the first list item defined here for an example:
<ul id = "blob-hover-menu" data-background = "[185, 245, 255]"data-media-library = "https://www.push10.com/wp-content/uploads/">
<li data-svg = "blob1" data-filter = "GRAY" data-tint = "[185, 245, 255]" data-image = "advisor-bg-art.jpg" class = "hover-item" data-index = "0">Option 1</li>
Start by defining a media library and pulling images
The first data attribute we see, data-media-library, defines a folder for where the images will be hosted. For this example, we’re using the Push10 WordPress media library. This attribute needs to be attached to an element with the id “blob-hover-menu”.
Once the media library is defined, we can target specific images on each element with the class “hover-item“. Here, we see the data-image is “advisor-bg-art.jpg” and the data-media-library is “https://www.push10.com/wp-content/uploads/”, so the script will combine them and pull “https://www.push10.com/wp-content/uploads/advisor-bg-art.jpg” as the image on hover for this item.
Next, create a custom mask
The blob masks are created from an SVG so that they can be easily designed and widely customizable. To utilize a custom SVG, add the path element from your SVG into the html and tag it with a custom id.
Then, add that custom id to the corresponding hover-item as data-svg. In the code above, you can see that our hover-item is looking for blob1 as its path id, and sure enough, further down in the code we can see:
<path id = "blob1" d="M79.2,-98C106,-52.3,133.5,-26.2,149.5,16C165.6,58.2,170.1,116.4,143.3,145.6C116.4,174.8,58.2,174.9,-4.6,179.5C-67.4,184.1,-134.8,193.2,-178.8,164C-222.8,134.8,-243.4,67.4,-238.7,4.7C-234,-58,-204,-116,-160,-161.6C-116,-207.3,-58,-240.6,-15.9,-224.7C26.2,-208.8,52.3,-143.7,79.2,-98Z" fill="#FFFFFF" />
The P5 script will parse this SVG path, translate into its geometry type, and use it to mask the image.
What about adding special effects?
The wrapper also allows the developer of the site to tint the image or add 1 of 3 types of filtering effects. By adding data-tint and setting it equal to an array of 3 values (for rgb) or 4 values (for rgba), you can add individual tints to each hover-item. With data-filter, you can add gray, threshold or posterize to each item. Check the example for what each of these effects does, or review here.
Finally, let’s set a background
Since the images appear in an html canvas, we can’t just set the background via css. We also need to pass data-background to the container blob-hover-menu element. Just like data-tint, this can be passed as a 3 value rgb array.
