CSS text over image hover does not work

Question

I'm trying to get a photo description happening when you hover over the image. This sounds like an easy task but I can't get it to work. I've tried several different methods and none work or the pop up shows up all over the place or messes up my divs.

Here is my HTML:

<div id="box">
    <div class="mainimg">
        <a href="url" target="_blank">
            <img src="'thumbnail">
        </a>
        <span class="text">
            <p>'item.comment'</p>
        </span>
    </div>
    <div class="pfooter">
        <img src="avatar">
        <a href="userhome" target="_"blank">username</a>
    </div>
</div>

And my CSS:

#box {
    width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:10px;
}
#box .mainimg img {
    width: 160px;
    height 160px;
    margin-bottom:10px;
    border:1px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}
#box .mainimg span.text {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}
#box mainimg:hover span.text {
    opacity: 1;
}
#box .pfooter img {
    width: 50px;
    height: auto;
    position;
    absolute;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    float: left;
    color: #333;
    font-weight: bold;
}
#box .pfooter {
    height: 50px;
    width: 160px;
    font-size:0.75em;
}
#box .pfooter a {
    color: #808080;
    text-decoration: none;
}

Answer 1

You are missing a dot on one of your .mainimg selectors

Here is what you want: Working CodePen demo

#box {
    width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:10px;
    position: relative;
}
#box .mainimg img {
    width: 160px;
    height 160px;
    margin-bottom:10px;
    border:1px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}
#box .mainimg .text {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 142px;
    left: 0;
    position: absolute;
    top: 0;
    width: 152px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    border:1px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 4px;
}
#box .mainimg:hover .text {
    opacity: 1;
}
#box .pfooter img {
    width: 50px;
    height: auto;
    position;
    absolute;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    float: left;
    color: #333;
    font-weight: bold;
}
#box .pfooter {
    height: 50px;
    width: 160px;
    font-size:0.75em;
}
#box .pfooter a {
    color: #808080;
    text-decoration: none;
}

Looks like you were doing fine and just need to adjust the text box position. Add position: relative; to #box is a good start. I also rounded the corners.

See my codepen demo linked above for more tweaks.

Answer 2

The are three problems

1. is that you don't have a . before mainimg:hover

    #box .mainimg:hover span.text { opacity: 1; } 

2. you need to add some value to the top and left in the #box .mainimg span.text

    #box .mainimg span.text { background: rgba(0, 0, 0, 0.5); color: white; cursor: pointer; display: table; height: 150px; left: 34px; position: absolute; top: 12px; width: 150px; opacity: 0; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } 

3. Some of your HTML was incorrect <a href="userhome" target="_"blank">username</a> should be <a href="userhome" target="_blank">username</a>

I fixed those three problems in this demo