Iterate through each image within a specific div element and showcase the images with a blur effect applied

I have a div with multiple images like this:

<div class="am-container" id="am-container">
            <a href="#"><img src="images/1.jpg"></img></a>
            <a href="#"><img src="images/2.jpg"></img></a>
            <a href="#"><img src="images/3.jpg"></img></a>
            <a href="#"><img src="images/4.jpg"></img></a>
</div>

Now I want to create a loop that will display all the images as blurred, and on mouseover they should appear in their original form.

Is it possible to achieve this using simple jQuery? I've looked at some tutorials and demos with Gaussian.js and Blur.js, but haven't been able to get it working correctly.

Any suggestions would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

To achieve this effect, you can utilize pure CSS, although it is only compatible with Webkit browsers.

.am-container a img {
    filter: url(#blurred);
    -webkit-filter: blur(5px);
}

.am-container a:hover img {
    filter: url(#unblurred);
    -webkit-filter: blur(0px);
}

For Firefox support, include the following SVG in your HTML code or reference it from an external file:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blurred" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <filter id="unblurred" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
    </filter>
  </defs>
</svg>

Check out the JSFiddle example here

Answer №2

.section a img:hover {
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
filter: grayscale(50%);
}

Try this out...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to handle prepended <img> using Pixastic

I'm encountering a puzzling issue with my website's image display. Currently, I have implemented a jQuery script that successfully scans a folder to gather image sources and displays them as background images on the site. Everything works smooth ...

jqueryprependpixastic

Rotate the image as you swipe left or right with Angular's ng-swipe-left and ng-swipe-right features

I am currently utilizing angular's ng-swipe-left and ng-swipe-right to detect swipe events on touch devices. My goal is to rotate an image based on the speed and direction of the swipe while it is still in progress. However, I am facing a challenge as ...

javascriptangularjsswipeswipe-gestureangularjs-ng-touch

Spread out elements equally into columns

I am facing a challenge with arranging items within a single div called .wrap. The goal is to place an unknown number of items (.thing) into four columns, stacked on top of each other. <div class="wrap"> <div class="thing"> thing1 </div ...

htmlcssmultiple-columns

Email sent upon form submission

Users have the option to provide feedback through a simple form below. Upon submission, the feedback will be sent directly to my email address. The subject line of the email will automatically read "Feedback from [name input]" and the email will show it&ap ...

phphtml

Update the label for the weekday on Material UI picker

Is there a way to change the weekday display in Material UI DatePicker from single initial (M, T, W, T, F, S, S) to three-letter initials (MON, TUE, WED, etc)? I want to customize it in my component like this: <DatePicker disablePast disableTool ...

javascriptreactjsdatepickermaterial-uiluxon

My changes to the HTML file are not being reflected in the browser, even after clearing the cache. This is happening in an Angular and Node.js application

I'm currently developing an application using Angular and Node.js. I've noticed that when I make changes to the HTML file, the browser isn't updating even after clearing the cache. Could this be a coding issue? Any suggestions on how to fix ...

javascriptangularjsnode.js

Making an AJAX call to a PHP script to add data

Could you assist me in understanding why my code is resulting in a double insert? I have a JavaScript function that makes an AJAX request to a save.php file to insert data into a database. However, each time I submit it, it performs the insertion twice, al ...

javascriptphpmysqlajaxmariadb

Angular 8's array verification feature lacks the ability to recognize preexisting elements

I've been trying to add and delete items in an array when a user selects or deselects the same item. However, it appears that either my array is not working properly or there is a bug in my code causing it to fail. <div class="grp-input"> ...

javascriptarraysangulartypescript

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

Please provide the text input for the specified version numbers (1.1, 1.2, 3.0, etc.)

I'm currently working on a form that includes a section for searching by version number: <label class="formLabel">Version</label> <html:text property="valueVersion" styleClass="value" tabindex="11"/> <br/& ...

javascriptjqueryhtml

Stay updated with the complex query change feed in RethinkDB

When faced with a query like the following: r.db('universe') .table('Star') .getAll( r.db('universe').table('Ship').get(idShip)('idCurrentGalaxy'), {index: 'idGalaxy'} ) .changes ...

javascriptnode.jsrethinkdbrethinkdb-javascript

Attempting to iterate through the div in order to collect all of the checkboxes and assign a label to each one

I am attempting to modify a piece of JavaScript code in order to locate all checkboxes, assign names to them, and then add label attributes with CSS for accessibility purposes. Here is the snippet of my existing code: <tr class="el-table__row" ...

javascriptvue.js

fetch data in json format from httpbin

I am trying to send my html form data as JSON by using an AJAX call to httpbin.org, but unfortunately, I'm not receiving the desired output. $("#contact").submit( $.ajax({ url: "http://httpbin.org/post", type:'POS ...

jqueryajaxjson

Is it possible to modify the CSS injected by an Angular Directive?

Is there a way to override the CSS generated by an Angular directive? Take, for instance, when we apply the sort directive to the material data table. This can result in issues like altering the layout of the column header. Attempting to override the CSS ...

javascripthtmlcssangulartypescript

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox. I have researched both the old an ...

htmlcssflexbox

Using data attributes for assigning them to a div container - a complete guide!

As I venture into the world of HTML5 and JS, I'm facing some challenges in finding success. My goal is to dynamically load data attributes from "li" elements into a div container, which will provide additional information for a slide within the flexs ...

jqueryhtmlcontainerscustom-data-attribute

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

We've all seen that iconic military crosshair cursor in movies and animations. One example can be found at the beginning of a YouTube video titled "Dishonorable Disclosures" - https://www.youtube.com/watch?v=X-Xfti7qtT0 Another instance is with the ...

htmljqueryfullscreenmouse-cursorpanning

What is the best way to horizontally center a div with the layout attribute set to "row"?

I am currently working with a grid composed of cards from the Angular Material library. The issue I am facing is that the cards have a fixed size, which results in extra space on the right immediately after wrapping. My goal is to eliminate this space by ...

cssangularjsangular-material

What steps can be taken to ensure that the v-model input is not updated?

Typically, when a user enters a value in an input field, it automatically updates a model. However, I am looking to temporarily prevent this automatic update. In my application, I have a canvas where users can draw grids by entering lengths and widths in i ...

javascriptvue.js

How can I verify if my discord.js bot has the necessary permissions from a server or channel?

I need to verify two things: Determine if my bot has a particular SERVER permission (return true/false based on the presence of that permission) Confirm if my bot possesses a specific CHANNEL permission (return true/false depending o ...

javascriptnode.jsdiscord