Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Hayden Bradfield
Hayden Bradfield
1,797 Points

Will someone help me out with this issue...seriously?

I am having issues with positioning an image that has a transition.

This particular image, when you hover over it with the mouse, a slightly black transparent "film" appears over it with a description. This is known as a "transform" animation.

Here is the HTML and CSS for that image:

HTML:

<div id="img-container">
<img src="frog.jpg" alt="frog on lilypad">
<div class="img-overlay">
        <h3>Frog</h3>
    <p>This is a frog on a lilypad</p>
</div>
    </div>

CSS:

img-container {

position:relative;
max-width:250px;
height:150px;
background-color:#999;

}

img { position:absolute; max-width:250px; height:150; }

.img-overlay { opacity:0; position:absolute; color:white; top:0; height:150px; width:240px; background:rgba(0,0,0,0.5); opacity:50%; padding-left:10px; padding-right:0px; margin: 0px 0px; box-shadow:0px 0px 5px #FFF; transition-property:opacity; transition-duration:0.5s; }

.img-overlay:hover { opacity:1; }

.img-overlay p { margin:0px 0px; padding-bottom:5px; text-align:center; padding-left:0px; }

.img-overlay h3 { margin:0px 0px; padding-top:25%; text-align:center; padding-left:0px; }

Ok, so I create this transition.

When I go to insert it into a flex column layout, I cannot set it into the desired position where I want it,

I want it to float left in the far left column (on a 3 column layout). I want the paragraph text to flow around it.

But I believe the "absolute" positioning in the CSS of my photo overlay is causing issues when I go to insert it into the left column. However, the "absoute" positioning is needed to render that transparent "film" over the image.

Here is an example of what I am wanting:

http://i.imgur.com/Q8DxSbw.png

1 Answer

Perry Marquer
Perry Marquer
11,243 Points
Perry Marquer
Perry Marquer
11,243 Points

Is this what you're after?

#img-container {
    width: 33%;
    position:relative;
    max-width:250px;
    background-color:#999;
}

<div id="img-container">
    <h3>Frog</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            <img src="frog.jpg" alt="frog on lilypad" />
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

I have put a width just to save putting loads of dummy text in. Also I would suggest using classes rather than ids unless you are calling it with a function of some sort. Classes are re-useable, ids are not.