*

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

公開日: : css3, html5, mouseover, 未分類

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。

マウスオーバーをした際にアクションが起こらなければ、クリックできるのかわかりません。

最近は色々なアクションがよくあります。

変わったマウスオーバーを作成するのも1つのサイトの個性でもありとても大切な事だと考えています。

今回は、色々あるマウスオーバーアクションの中でもっとも一般的な、cssを利用して半透明にするという事をしてみました。

まずはこちらをみてください。
デモ01

リンクがついている画像をマウスオーバーすると黒く半透明になります。

以下にソースを記載します。
index.htmlファイル

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>マウスオーバーした時、半透明にする方法。</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>






<div class="wrapper">マウスオーバーすると黒色で半透明になります。
<a href="#" class="hover_img2">
<img src="Apple.jpg" alt="マウスオーバーすると黒色で半透明になります。">
</a>
</div>





</body>
</html>

cssファイル(style.css)

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #ffffff;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:15px;
	width: 100%;
	color:#000000;
	position:relative;
}

.wrapper img {
	vertical-align:middle;
}
.wrapper{
	width:1024px;
	margin:0 auto;
}


a.hover_img2{
	background-color:#000000;/*ここでマウスオーバーするときの色を設定できます。*/
	display:block;
}
a.hover_img2 img{
	transition:all 0.5s ease;/*ここでマウスオーバーが完了する時間や動きが設定できます。*/
}
a:hover.hover_img2 img{
	opacity: 0.7;/*ここでマウスオーバー時の透明度が設定できます。(各ブラウザ用)*/
	filter: alpha(opacity=70);/*ここでマウスオーバー時の透明度が設定できます。(各ブラウザ用)*/
}

この方法は、
半透明にするだけではなくて、
マウスオーバーが完了するまでの時間や動きを設定できるのがいいと思いました。

このように少しアレンジを加えれば、また一味変わったマウスオーバーアクションが作成できるのではないでしょうか?

今回、参考にしたサイトがありますので
こちらも参考にしてみてください。
画像にマウスオーバーした時、CSSで半透明の白を乗せる方法

その他調べてみたらいろいろなアクションがありましたので
こちらも参考にしてみてください。
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ

今回作成した、ファイルをUPしときましたので
参考にでも使ってください。
ダウンロード


関連記事

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑