*

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

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑