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 Jesse Box
Jesse Box
5,068 Points

Including Hover elements using Flexbox

Hi fellow treehousers

I'm in the midst of coding my portfolio page using flexbox as my layout mechanic. I have these thumbnails that link to the projects page. The markup looks like so.

<a href="#" class="grid-cell-lge">
    <span class="img-hover">
        <h1>Underground Warehouse Party</h1>
    </span>
    <img src="url" class="thumbnail" alt="description">
    <div class="thumbnail-info">
        <h2>The Animal Ballet</h2>
        <p>Identity, Print &amp; Motion</p>
    </div>
</a>

A possible solution I just thought of could be replace the img element with a span element and give it a desired background image with a height value? Seems a little hacky though.

The overall effect I'm trying to reach with this is the span tag named "img-hover" to be vertically and horizontally centered and to appear when you hover over it.

Any input from you people would be great, because there doesn't seem to be any real solution out there on the web at least from what I could see.

If you need any further info just give me a buzz :)

Cheers guys

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Just to clarify your goal as the question is lacking information as regards to your actual goal. From what I understand you want the h1 housed inside the span.img-hover tag to appear centered on the x and y axis when when the image is hovered over?

Thanks

Jesse Box
Jesse Box
5,068 Points

Thanks for your reply adam and sorry for not making it clearer originally but yes you've hit the nail on the head.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Give me a few minutes

5 Answers

justinliang
justinliang
6,948 Points
justinliang
justinliang
6,948 Points

Could you do more explain on your question?
From what you said: "The overall effect I'm trying to reach with this is the span tag named "img-hover" to be vertically and horizontally centered and to appear when you hover over it."
What I am think of is:

.img-hover:hover {
text-align: center;
}

Is that you want?

Jesse Box
Jesse Box
5,068 Points
Jesse Box
Jesse Box
5,068 Points

Yeah sure, so I don't specifically mean the text although I will eventually center the h1 text. What I'm talking about is the parent span element that encompases that h1, that needs to be vertically and horizontally aligned over the img element when you hover over it.

justinliang
justinliang
6,948 Points
justinliang
justinliang
6,948 Points

OKay, could you post the other codes ? like what is the span element? and what is the CSS code for img element.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Something like this would just need to style to your needs.

Jesse Box
Jesse Box
5,068 Points
Jesse Box
Jesse Box
5,068 Points

Thanks for doing that man, would you mind sharing the pen or making the pen public just so I can see what you did more clearly. right now its just a url of the work you did.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

here Happy to help mate.