Colors, Hover and space

Hello guys! how is everything? I hope you feel good: smile :, I’ll tell you something about today:
I’ve been trying to do 3 things: ´
1-That my images stand out when I position my mouse over each one.
2-That the colors and letters added to the code can be noticed (red, etc)
3- That each image appears side by side in the Pinterest style.

But although partially I achieve the second and third; I have not been able to hit the first one.
Can anyone guide me here? Thanks in advance!!

It appears you’re trying to scale elements with class .fotos but I don’t see that class used in your HTML.

Also be careful with how you’ve nested your various classes in SCSS. The &:hover doesn’t seem to be nested inside of anything.

O sea que debo de cambiar el <.fotos> y el <&:hover> deberia ponerlo dentro de algo ?
Vamos a experimentar ;).

If you aren’t familiar with SCSS, you don’t have to use it. You can just stick with regular CSS.

With regular CSS, .foto:hover{ /* do something */} is sufficient.

1 Like

Eric! here i got another situation; i’ve changed a lot of code and make it shortier with put the “classes” of the image in a same way and rule but i got two troubles:
1-Mi images no se pueden mover todavia :frowning:
2-La última imagen “once”, no quiere aparecer :x:

HEEEELP

Haha I don’t speak much spanish, but I think I see what you’re asking.

Remember that all classes in CSS need to have a . preceding the class name. It appears you’re missing them. Also, you can’t say .class1, .class2, .class3:hover{} and expect hover effects on all classes. The hover effect would only be on the last class. Perhaps you can just reuse the same class for all your images, and say .image:hover{}

The last image isn’t working because you’re missing a " to close the image URL.

1 Like

AWESOM dude hahahah, Eric Thank ya’ :smile:!! BTW, do you work only on Front End or you´re most of Back-End?

PD: Even when the last image is restaured, the hoover efect doesn´t work still…why do you think that this is happening? https://codepen.io/pabloeoliveros/pen/RwaeJMZ?editors=1100

You’re still missing a . for your .image class.

Also, you need to separate multiple classes with commas (this isn’t going to work: .ellie.bear.once{}).

And you also haven’t added the .image class into your HTML yet.

Yep I do backend as well :slight_smile:

2 Likes

THAAAAANKS!! :smile: :smile: