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
Konrad Pilch
2,435 PointsCreating 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.
4 Answers
Kevin Korte
28,149 PointsNo 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
28,149 PointsWhy not reverse engineer the site you like. You can see the html and css in your inspector.
Konrad Pilch
2,435 PointsWell, i did that, it doesn't work : p or i did something wrong, probably.
Kevin Korte
28,149 PointsWhat do you mean it doesn't work, the inspector or the site? Which browser are you using?
Konrad Pilch
2,435 PointsThe code im doing. I copied exactly the code there, it just doesn't work.
Kevin Korte
28,149 PointsYou 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
2,435 PointsxD 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
Treehouse Moderator 91,253 PointsYou'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
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
2,435 PointsLol, 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
20,305 PointsI am not sure I understand your question. What effect are you trying to create exactly?
Konrad Pilch
2,435 PointsThe portfolio section basically.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsThis 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.