Displaying images in a row and indicating selection - HTML and CSS - html

Question

What I would like to achieve (the goal)...
I'm trying to display a row of images (with the image name below the image) in html, like so:
When a user clicks on an image I want a square to appear over the image, to indicated selection like so (user has clicked on Tile1):
What I have done so far...
So far I have managed to display the tiles in a row:
Here's the html code that produced the image above:
<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>
And the 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;
}
And a fiddle showing the example above: http://jsfiddle.net/jamiefearon/t8d6U/
The strategy to achieve the goal...
I was thinking about wrapping the image and its title in a div, and then changing the background colour of the div. Here is the result and the code:
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;
}
The Problem..
It does not look good, and the actual image is not covered by the red colour. Maybe it would be possible to overlay a div over the wrap div, set it's opacity < 1 and change its background colour.
What do think? Does anyone have any ideas of a good way to achieve the goal?

Answer 1

Something like this should do the trick: http://jsfiddle.net/t8d6U/1/
So just hide the overlay DIVs initially with display:none (or e.g. left:-9999px) then show them 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>

Answer 2

I have taken what Gaurav said in the comments, changing the opacity:
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;
}
Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/
Hover over Tile1 to see the effect.