How to create a Dribbble-esque image hover effect?

Question

I was wondering how I would go about having a div with text/other content within it appear on top of an image upon rollover. Similar to the way Dribbble have (when you hover over an image, text comes up on top of the image).

This is the code I have so far (sidenote: I am not much of a coder, I only know the basics so please be patient with me):

HTML

<div id="portfolio-grid">
    <div id="portfolio-column">
        <div id="portfolio-item">
        <img src="images/portfolio-thumbs/1.jpg" alt="Portfolio Item 1">
        </div>
        <div id="portfolio-item">
        <img src="images/portfolio-thumbs/1.jpg" alt="Portfolio Item 2">
        </div>
</div>

CSS

#portfolio-grid {
  height: 1043px;
  margin-left: 19px;
  margin-bottom: 55px;
  float:left;
}
#portfolio-column {
  width: 276px;
  margin-right: 19px;
  float:left;
}
#portfolio-item {
  width: 276px;
  margin-bottom: 15px;
  float:left;
}

Here is an example of an image before hover: http://cl.ly/VMln And here is what I would like it to look like when hovered over: http://cl.ly/VNJY

If there is a way to have a slight transition between the two, say have the content fade in, that would be brilliant!

Thank you in advance :)

Answer 1

You can do this using CSS transition and opacity :

FIDDLE

Also, you cannot use an id twice in your markup. Ids must be unique, you should be using class for portfolio-item and you forgot the closing tag for #portfolio-grid

HTML:

<div id="portfolio-grid">
    <div id="portfolio-column">
        <div class="portfolio-item">
            <img src="http://lorempixel.com/output/people-h-g-353-550-4.jpg" alt="Portfolio Item 1" />
            <div class="content">your text here</div>
        </div>
        <div class="portfolio-item">
            <img src="http://lorempixel.com/output/fashion-h-g-353-550-1.jpg" alt="Portfolio Item 2" />
            <div class="content">your text here</div>
        </div>
    </div>
</div>

CSS:

#portfolio-grid {
    height: 1043px;
    margin-left: 19px;
    margin-bottom: 55px;
    float:left;
}
#portfolio-column {
    width: 276px;
    margin-right: 19px;
    float:left;
}
.portfolio-item {
    width: 276px;
    margin-bottom: 15px;
    float:left;
    position:relative;
}
.portfolio-item img {
    display:block;
    width: 276px;
    height:auto;
}
.content {
    position:absolute;
    top:0;
    left;
    0;
    width:100%;
    height:100%;
    background:#E74C3C;
    opacity:0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.portfolio-item:hover .content {
    opacity:1;
}