Question

I have a text list with the following structure:

<div class="text">
<a href="/node/30">Site Text</a>
</div>

I want to get a blur effect for the other list items, when the mouse hovers over one list item.

I would like to get the same effect shown on http://tympanus.net/Tutorials/ItemBlur/.

How can i do?

Answer 1

Hey check these examples:

yes but you can only blur text here not other things.(In css 2)

but can blur other things too in css 3.

Example 1

Example 2

Edit:

Check this out:

<style>
 .hello{color:transparent; text-shadow:0 0 0 #000; font-size:20px;}
 .hello div{float:left; margin:10px;}
 .hello:hover div{text-shadow:0 0 10px #000;}
 .hello:hover div:hover{text-shadow:0 0 0 #000;}
 </style>
  <div class="hello">
    <div>
        new1
    </div>
    <div>
        new2
    </div>
    <div>
        new3
    </div>
    <div>
        new4
    </div>
  </div>

this is a simple css based effect use it and enjoy 😉