当前位置: 动力学知识库 > 问答 > 编程问答 >

creating blur and differentiated margin using hover in html and css

问题描述:

hello i was trying to create the hover effect of the left hand side buttons of this website http://esya.iiitd.edu.in/# but was unable to.

The effect is basically a margin shift of the text and unevening of margins which i am unable to acheive using any code knowledge that i have ( which is very little )

<style>

#button {

\properties of button/

}

#button:hover {

\code that i am not able to write/

}

also is this acheivable only using css or can i use javascript ( not jquery ) also ?

网友答案:

This is totally doable with pure css as long as you use a plain image with the img tag inside your button

HTML example:

<a id="#button" href="someurl"><img src="someimage.jpg" /></a>

Then use this CSS

#button {
transition: margin-left 1s;
margin-left: 0px;
}

#button:hover {
margin-left: 50px;
}

#button:hover img {
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

Note that you can change the blur parameter (here 5px to adjust the blur effect) If you want to add text over the image. Place a SOMETEXT after the img tag and before the colsing a tag, and use position: relative to positionate it correctly.

分享给朋友:
您可能感兴趣的文章:
随机阅读: