*

マウスオーバーした時に画像を半透明にする。”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

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

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

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

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

Message

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

PAGE TOP ↑