*

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

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

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

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

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

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

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑