*

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

animationでboxを動かしてみた。

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

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

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

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

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

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

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

Message

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

PAGE TOP ↑