背景を透過させた画像に、CSS の transition を使って、カーソルを乗せると暗〜くなる効果

各ブラウザ対応。( IE9 でも動く )

<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
   filter:progid:DXImageTransform.Microsoft.Fade(duration=0);
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>

<script type="text/javascript">
</script>
<div id="target" class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>

<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=".set_image:hover {   \n";
	str+="	background-color: #000; \n";
	str+="} \n";
	str+="</style> \n";
	document.write(str);
}
else {
	target.filters[0].Apply();
	target.style.backgroundColor="#fff";
	target.filters[0].Play();
	target.filters[0].duration = 2;
}
})();

</script>

DAZ Studio 4 Pro は、ずっとタダのような気がしてきた・・・





インストール方法は ▼ これで OK ですが、使うとなるとヒマな時間がたくさん必要です。

無料の期間限定で3D人物CG作成ソフト「DAZ Studio 4 Pro」が入手可能 - GIGAZINE


ところで。

CSS の transition ですが・・・IE が無ければ ▼ これだけで動きます
<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>

<div id="target" class="box_transition set_image"
onmouseover='this.style.backgroundColor="#000";'
onmouseout='this.style.backgroundColor="#fff";'></div>

こういう世の中はまだずっううううっと続くのです


posted by at 2012-07-13 00:30 | ウェブ | このブログの読者になる | 更新情報をチェックする