CODEWITHSUNDEEP
jquerydrupalblur
Karmacoma
Karmacoma

Reputation: 668

Text blur effect via jQuery

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/.

before

after

How can i do?

Upvotes: 1

Views: 1368

Answers (3)

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:-

$("#ElementID").hover(function(){
  $("#OtherElementId").blur();
});

Upvotes: 0

KDS
KDS

Reputation: 137

Try:

$('.text a').blur(function() {
    //Add your styles
}

Upvotes: 0

Vipin Jain
Vipin Jain

Reputation: 1402

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 ;)

Upvotes: 2

Related Questions