マウスオーバーで画像に効果を入れたいです。

Question

実現したいこと

初心者です。
マウスオーバーで画像に効果を入れたいのですが、
htmlが

<div class="img_wrap"> <img src="**"></div> となっているものが多く、divclassの下にとりあえず、上記を入れてみたのですが 動作しません。 そもそもあまりhtmlがわからないのでどこで指定すればよいのかご教示いただきたいです。

以下のように今は設定されています。

<div class="**" style="**"> <table class="img" cellspacing="0" cellpadding="0"> <tbody><tr> <td><a href="1.jpg" onclick="popWindow('1.jpg','',10,50);return false;" target="_blank" title=""><img src="1.jpg" height="1" width="0" /></a></td> ・ ・ ・と10枚くらいの画像が表示されています。

1枚画像に触れると少し明るくなるようにしたいのですが、cssはHPで探しているので指定できそうなのですが。。

Answer 1

「1枚画像に触れると少し明るくなるようにしたい」の仕様によりますね

• 画像を入れ替える
• 適当なダーミーをオーバーレイしておいてその属性を変更する
• 画像のopacityを調整する
• svgなどで調整する

などあるでしょう。

参考

<style>
.bgblack{
  background-Color:black;
}
.img_wrap img:hover{
opacity:0.6;
}
</style>
<div class="img_wrap">
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1">
<img src="https://placehold.jp/00ff00/00000/100x100.png?text=2">
<img src="https://placehold.jp/0000ff/00000/100x100.png?text=3">
<img src="https://placehold.jp/ffff00/00000/100x100.png?text=4">
<img src="https://placehold.jp/00ffff/00000/100x100.png?text=5">
</div>
<div class="img_wrap bgblack">
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1">
<img src="https://placehold.jp/00ff00/00000/100x100.png?text=2">
<img src="https://placehold.jp/0000ff/00000/100x100.png?text=3">
<img src="https://placehold.jp/ffff00/00000/100x100.png?text=4">
<img src="https://placehold.jp/00ffff/00000/100x100.png?text=5">
</div>

注意
アニメーションさせたいのでしょうか？その場合記載がすこし複雑になります。
なお画像を明るくしているのではなく、透明度を設定して裏の色が透けているだけなので背景色によっては明るくなりません

table版

テーブルでもかわらないと思いますが・・・

<style>
.bgblack{
  background-Color:black;
}
.img_wrap img:hover{
opacity:0.6;
}
</style>
<table class="img_wrap" >
<tbody>
<tr>
<tr>
<td><a href="#"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"></a></td>
<td><a href="#"><img src="https://placehold.jp/00ff00/00000/100x100.png?text=2"></a></td>
<td><a href="#"><img src="https://placehold.jp/0000ff/00000/100x100.png?text=3"></a></td>
<td><a href="#"><img src="https://placehold.jp/ffff00/00000/100x100.png?text=4"></a></td>
<td><a href="#"><img src="https://placehold.jp/00ffff/00000/100x100.png?text=5"></a></td>
</tr>
<tr class="bgblack">
<td><a href="#"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"></a></td>
<td><a href="#"><img src="https://placehold.jp/00ff00/00000/100x100.png?text=2"></a></td>
<td><a href="#"><img src="https://placehold.jp/0000ff/00000/100x100.png?text=3"></a></td>
<td><a href="#"><img src="https://placehold.jp/ffff00/00000/100x100.png?text=4"></a></td>
<td><a href="#"><img src="https://placehold.jp/00ffff/00000/100x100.png?text=5"></a></td>
</tr>
</div>

Comments

[退会済みユーザー]

早速にありがとうございます。HPで探してきたCSSは
.img_wrap{
border: 1px solid #ddd;
width: 300px;
height: 226px;
margin: 0 auto;
overflow: hidden;
}
.img_wrap img{
width: 100%;
cursor: pointer;
transition-duration: 0.3s;
}
.img_wrap:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}
です。こちらを機能させたいのですがhtmlの方が分からず。。

[退会済みユーザー]

ご回答ありがとうございます。
申し訳ありません。画像とお伝えしましたが、写真でして、 <table class="img" cellspacing="0" cellpadding="0"> を＜div class="img_wrap">に変更すればよろしいでしょうか。<div class="**" style="**">はその前に枠？の指定がされているのですが。div　classは２つ続けて使えるものなのでしょうか。

[yambejp]

＞ <table class="img" cellspacing="0" cellpadding="0"> を＜div class="img_wrap">に変更すればよろしいでしょうか

「.img_wrap」を使用するというのは質問者さんが提示したことなので、HTML構成やクラスの付け方は好きにしてください。
私の例示したHTMLをコピペすれば具体的な構造と動作がわかるはずですが、なにかつまっているのでしょうか？

[退会済みユーザー]

html上だけでできるのですね。cssで指定するものと思っていました。テーブルは無視して写真を抜き出して実行してみたらできましたありがとうございました。テーブルの写真はかなり量があるので少し考えながらやってみます。
早速にありがとうございました。

[退会済みユーザー]

度々すみません。cssに同じように.img_wrap img:hover{
opacity:0.6;
}
を指定しても動かないのは他が影響しているからでしょうか。

[yambejp]

>指定しても動かない

動かないというソースが提示されていないのでなんともいえません
codepenなどソースをアップして確認できるサイトに例示してもらうと助言できるかもしれません

[退会済みユーザー]

どこまで開示していいのか分からないのですが、もし分かれば幸いです。

●htmlは今

.img_wrap img:hover{
opacity:0.6;
}
</style>
<table class="img_wrap" cellspacing="0" cellpadding="0">
<tbody><tr>
<td><a href=...

となっていて、CSSで該当しそうなのが

.img_wrap {
width: 700px;
margin: 2em auto;
}

.img_wrap td{
padding:5px;
}

で、この下に追加すればよいのかな？と考えていたのですが。

[yambejp]

追記しましたが、テーブルでも関係なく反映しますね・・

[退会済みユーザー]

早速の回答ありがとうございます。

CSSファイルに
.img_wrap {
width: 700px;
margin: 2em auto;
}

.img_wrap td{
padding:5px;
}

.bgblack{
background-Color:black;
}
.img_wrap img:hover{
opacity:0.6;
}

を追加して動作するのかを確認してみます。何度もありがとうござました。

[yambejp]

bgblackは、あくまで背景が黒かったらhoverで色は黒っぽくなるというサンプルなので本題とはあまり関係ないのでご留意ください