StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18322705
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
8
CommunityOwnedDate
CreationDate
2013-08-19T20:39:35.520
FavoriteCount
0
LastActivityDate
2015-07-21T23:32:39.787
LastEditDate
2015-07-21T23:32:39.787
LastEditorUserId
2680216
OwnerUserId
2680216
ParentId
18322548
PostTypeId
2
Score
185
ViewCount
0
LastEditorDisplayName
text
Body
I'd suggest using a pseudo element in place of the overlay element. Because pseudo elements can't be added on enclosed <code>img</code> elements, you would still need to wrap the <code>img</code> element though. <a href="http://jsfiddle.net/9z26ky19/">LIVE EXAMPLE HERE</a> -- <a href="http://jsfiddle.net/51csqs0b/">EXAMPLE WITH TEXT</a> <pre><code><div class="image"> <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> </div> </code></pre> As for the CSS, set optional dimensions on the <code>.image</code> element, and relatively position it. If you are aiming for a responsive image, just omit the dimensions and this will still work <a href="http://jsfiddle.net/s6q288sw/">(example)</a>. It's just worth noting that the dimensions must be on the parent element as opposed to the <code>img</code> element itself, <a href="http://jsfiddle.net/qhamuv32/">see</a>. <pre><code>.image { position: relative; width: 400px; height: 400px; } </code></pre> Give the child <code>img</code> element a width of <code>100%</code> of the parent and add <code>vertical-align:top</code> to fix the default baseline alignment issues. <pre><code>.image img { width: 100%; vertical-align: top; } </code></pre> As for the pseudo element, set a content value and absolutely position it relative to the <code>.image</code> element. A width/height of <code>100%</code> will ensure that this works with varying <code>img</code> dimensions. If you want to transition the element, set an opacity of <code>0</code> and add the transition properties/values. <pre><code>.image:after { content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.6); opacity: 0; transition: all 1s; -webkit-transition: all 1s; } </code></pre> Use an opacity of <code>1</code> when hovering over the pseudo element in order to facilitate the transition: <pre><code>.image:hover:after { opacity: 1; } </code></pre> <a href="http://jsfiddle.net/9z26ky19/">END RESULT HERE</a> <hr> <h2>If you want to add text on hover:</h2> For the simplest approach, just add the text as the pseudo element's <code>content</code> value: <a href="http://jsfiddle.net/jdL7q7z1/">EXAMPLE HERE</a> <pre><code>.image:after { content: 'Here is some text..'; color: #fff; /* Other styling.. */ } </code></pre> That should work in most instances; however, if you have more than one <code>img</code> element, you might not want the same text to appear on hover. You could therefore set the text in a <code>data-*</code> attribute and therefore have unique text for every <code>img</code> element. <a href="http://jsfiddle.net/avz0hgjs/">EXAMPLE HERE</a> <pre><code>.image:after { content: attr(data-content); color: #fff; } </code></pre> With a <code>content</code> value of <code>attr(data-content)</code>, the pseudo element adds the text from the <code>.image</code> element's <code>data-content</code> attribute: <pre><code><div data-content="Text added on hover" class="image"> <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> </div> </code></pre> You can add some styling and do something like this: <a href="http://jsfiddle.net/51csqs0b/">EXAMPLE HERE</a> In the above example, the <code>:after</code> pseudo element serves as the black overlay, while the <code>:before</code> pseudo element is the caption/text. Since the elements are independent of each other, you can use separate styling for more optimal positioning. <pre><code>.image:after, .image:before { position: absolute; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:after { content: '\A'; width: 100%; height:100%; top: 0; left:0; background:rgba(0,0,0,0.6); } .image:before { content: attr(data-content); width: 100%; color: #fff; z-index: 1; bottom: 0; padding: 4px 10px; text-align: center; background: #f00; box-sizing: border-box; -moz-box-sizing:border-box; } .image:hover:after, .image:hover:before { opacity: 1; } </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POBlack transparent overlay on image hover with only CSS?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USJosh Crozier
UserOwnerUserId
1. USJosh Crozier
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POBlack transparent overlay on image hover with only CSS?
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.