html - 画像を並べて表示し、選択を示す - HTML と CSS

Question

やりたいこと（目標）は…

次のように、HTMLで画像の行を（画像の下に画像名を付けて）表示しようとしています：

ユーザーが画像をクリックすると、画像の上に正方形が表示され、次のように選択されます (ユーザーは Tile1 をクリックしました):

---

今までやってきたこと…

これまでのところ、タイルを一列に表示することができました。

上記の画像を生成した html コードは次のとおりです。

<div id='default_tiles_view'>
    <div class="default_tiles_view_square" id="tile1">
        <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
        <p>Tile1</p>
    </div>
    <div class="default_tiles_view_square" id="tile2">
        <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
        <p>Tile2</p>
    </div>
</div>

そしてCSS：

#default_tiles_view {
    width: 490px;
    height: 160px;
    overflow-y: auto;
}
.default_tiles_view_square {
    display: inline-block;
}
.default_tiles_view_square p {
    text-align: center;
}

上記の例を示すフィドル: http://jsfiddle.net/jamiefearon/t8d6U/

---

目標を達成するための戦略...

画像とそのタイトルを div で囲み、div の背景色を変更することを考えていました。結果とコードは次のとおりです。

HTML:

<div id='default_tiles_view'>
    <div class="tile_wrap" id="tile1">
        <div class="default_tiles_view_square">
            <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
            <p>Tile1</p>
        </div>
    </div>
    <div class="tile_wrap" id="tile2">
        <div class="default_tiles_view_square">
            <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
            <p>Tile2</p>
        </div>
    </div>
</div>

CSS:

#default_tiles_view {
    width: 490px;
    height: 160px;
    overflow-y: auto;
}
.tile_wrap {
    display: inline-block;
}
.default_tiles_view_square p {
    text-align: center;
}
#tile1 {
    background-color:red;
}

---

問題..

見栄えが悪く、実際の画像は赤い色で覆われていません。おそらく、ラップ div に div を重ねて、不透明度を 1 未満に設定し、背景色を変更することができます。

どう思いますか？誰かが目標を達成するための良い方法のアイデアを持っていますか?

Answer 1

不透明度を変更して、コメントでGauravが言ったことを取り上げました。

HTML

<div id='default_tiles_view'>
    <div class="tile_wrap" id="tile1">
        <div class="default_tiles_view_square">
            <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
            <p>Tile1</p>
        </div>
    </div>
    <div class="tile_wrap" id="tile2">
        <div class="default_tiles_view_square">
            <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
            <p>Tile2</p>
        </div>
    </div>
</div>

CSS

#default_tiles_view {
    width: 490px;
    height: 160px;
    overflow-y: auto;
}
#tile1:hover{
    background:red; 
    opacity:0.4; 
}

.tile_wrap {
    display: inline-block;
}
.default_tiles_view_square p {
    text-align: center;
}

フィドル: http://jsfiddle.net/jamiefearon/BY9Fp/

Tile1 にカーソルを合わせて効果を確認します。

Answer 2

このような何かがうまくいくはずです：http://jsfiddle.net/t8d6U/1/

したがって、最初に display:none (または left:-9999px など) でオーバーレイ DIV を非表示にしてから、onClick で表示します。

CSS:

#default_tiles_view {
    overflow: auto;
}

.default_tiles_view_square {
    float: left;
    margin: 5px 10px 10px 10px;
    position: relative;
    height: 128px;
    width: 128px;
}
.default_tiles_view_square p {
    text-align: center;
}

.content {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

.overlay {
    position: absolute;
    z-index: 2;
    background: red;
    opacity: 0.5;
    height: 128px;
    width: 128px;
    top: 0;
    left: 0;
}

HTML:

<div id='default_tiles_view'>

    <div class="default_tiles_view_square" id="tile1">
        <div class="content">
         <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
         <p>Tile1</p>
        </div>
        <div class="overlay"></div>
    </div>

    <div class="default_tiles_view_square" id="tile2">
        <div class="content">
         <img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
         <p>Tile2</p>
        </div>
        <div class="overlay"></div>
    </div>

</div>