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

Konrad Pilch
Konrad Pilch
2,435 Points

Creating hover effect on image CSS

HI, if you look here how can i create the effect thats on the portfolio image when hover?

I forgot how to do it ;d didnt do CSS for a while.

Konrad Pilch
Konrad Pilch
2,435 Points

This is a FA icon tho, theres no image, the image is fixed, the only thing is comming out is the FA font and background fadin in. So it should be displayed none, and when you hover, it displays the background and the font FA.

Im a bit rusted with my CSS as i didnt do it for a while.

4 Answers

Kevin Korte
Kevin Korte
28,148 Points

No problem man. Not looking to bust ya, but it's more likely you'll remember how to do it if you figure it out yourself.

My general approach would be though that the red overlay would be a pseudo element, absolutely positioned over the containing element. I would transition the background color with CSS3 transitions when you hovered over the containing element.

I'd also probably have the plus sign as an svg, also absolutely positioned inside of the containing element, centered width and height with margin: 50% everywhere. I'd give it a similar transition on hover so it all faded in as one.

That's the general approach I'd take.

Kevin Korte
Kevin Korte
28,148 Points

Why not reverse engineer the site you like. You can see the html and css in your inspector.

Konrad Pilch
Konrad Pilch
2,435 Points

Well, i did that, it doesn't work : p or i did something wrong, probably.

Kevin Korte
Kevin Korte
28,148 Points

What do you mean it doesn't work, the inspector or the site? Which browser are you using?

Konrad Pilch
Konrad Pilch
2,435 Points

The code im doing. I copied exactly the code there, it just doesn't work.

Kevin Korte
Kevin Korte
28,148 Points

You must be missing something. It would work. Spend some time really reading the html and css. I don't think it's doing anything with js, but double check that.

This will be how you'll have to do a lot in the future as you see cool stuff like this. I'll help answer questions, but I'm going to make you do the leg work.

Konrad Pilch
Konrad Pilch
2,435 Points

xD Kevin, always spots when somebody is lazy xD i did this before, and many other effects too with pure css, i just didn't spend too much time on it and now i have no clue where i put my files :D didnt do anything for a while really, now im getting back slowly. Thank you btw xD ill spend some more time on that.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

You'd simply do a background image on the hover pseudo class?

.portfolio-image{
   background-image: url('your-image');
}

and on hover

.portfolio-image:hover{
   background-image: url('your-hover-image');
}
Garrett Levine
Garrett Levine
20,305 Points
.portfolio-image:hover::after {
    background-color: linear-gradient(colour1, colour2);
    content: url".../.../assets/plus-sign.svg";
    transition: 0.5s;
}

this is how I would solve it in plain CSS.

Or instead of applying seperate CSS styles, just get a transparent background with the + and place it over top. Jonathan illustrates that method!

I may be wrong, but you can always use the chrome dev tools to see exactly what styles are applied to the element!

Konrad Pilch
Konrad Pilch
2,435 Points

Lol, thats what i ment, what do i write? how do i structure that? i dont know, but seem that what happend to work before, doesnt work now with the display none , visible and so on.

Garrett Levine
Garrett Levine
20,305 Points

I am not sure I understand your question. What effect are you trying to create exactly?

Konrad Pilch
Konrad Pilch
2,435 Points

The portfolio section basically.