How to create a Dribbble-esque image hover effect?


Tags: html,css,hover

Problem :

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 :)



Solution :

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;
}

    CSS Howto..

    Achieved JS typewriter effect, can't figure out how to make it loop after last array item

    How to scale a website for mobile devices?

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    How to right and left align every alternate list item in html and css along with the bullets

    How to Display this CSS List using Class

    How to do aligning image next to textbox with CSS? [closed]

    How do I apply a style to all children of an elements

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    Show Content if below specific width

    how do I select in css so the items appears in hover state In entire page(mega menu)

    How to use scss with css modules / postcss inside components

    How to target a group of long similar CSS selectors on one line?

    How to check if element contains specific class attribute

    How to make sure JQuery dynamically inject CSS properly and ready to use?

    How to draw an inner div over an outer div using css?

    How to do make CSS Toggle like this? [closed]

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How to use CSS :hover to make extra div block elements display?

    How to Align all inputs in a Form

    Django 1.7: how to send emails by using an html/css file as template

    How to make the CSS “~” selector work in GWT Css Resource

    How to change the order of columns in CSS template to put important content first?

    How to force resize inside iframe?

    How to center an input field in HTML / CSS / Bootstrap

    How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    How to create a vertical linear gradient for a GTK separator

    CSS: How to get rid of the extra space of first line of a paragraph?