综合开发

Change the DIV background image to .hover – with fade

微信扫一扫,分享到朋友圈

Change the DIV background image to .hover – with fade

I’m looking to fade from one background image to another using a standard .hover link.

An example of the link without the fade can be seen here: http://www.makestudio.co.uk/sites/seven/

Other pages within the site will use similar layout only different background images for the links. Any help would be amazing.

Don’t need jquery, just css

<div id="thisdiv">Content</div>

CSS

#thisdiv { height: 200px;
width: 200px;
background-color: #600;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s; }
#thisdiv:hover {
background-color: #006;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;}

jsFiddle sample

With an image you can use CSS for opacity to fade the image then brighten it up on hover. You can’t really fade between images without jquery though.

CSS centering on desktop but not mobile

上一篇

Genetic Algorithms Explained : A Python Implementation

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

Change the DIV background image to &period;hover – with fade

长按储存图像,分享给朋友