I spent a couple hours working on my pet

Carlee 's profile to change the colors and things, and it's just about finished. How do I make my user avatar and the angelic birthday cake image semi transparent like the rest of the images on the page, and then opaque on mouseover? I just want them to fit in with the rest of the design. The avatar is the actual [avatar=LadyFoxling] coding. Thank you!

To select the avatar image the selector ".scode-avatar" will work and for the cake image there is some ways to select it currently such as the selector "img[src=https://img.subeta.net/items/food_birthdaycake_angelic.gif]" I'll put a note at the end on having a cleaner/nicer selector at the end but the one given is perfectly fine.

Now just in case there are three places you need to add these two selectors one needs to have the state :hover added to the selector The three places I mention are below but may not be together or in that order .frdiv a span, .frdiv img, .frdiv .blurb, .frdiv:hover { transition: opacity 0.66s ease-in-out, box-shadow 0.66s ease-in-out; }

.frdiv a span, .frdiv img, .frdiv .blurb { opacity: 0.66; }

.frdiv:hover a span, .frdiv:hover img, .frdiv:hover .blurb { opacity: 1; } This is what it should look like if you use the selectors I mention .frdiv a span, .frdiv img, .frdiv .blurb, .frdiv:hover, .scode-avatar, img[src="https://img.subeta.net/items/food_birthdaycake_angelic.gif"] { transition: opacity 0.66s ease-in-out, box-shadow 0.66s ease-in-out; }

.frdiv a span, .frdiv img, .frdiv .blurb, .scode-avatar, img[src="https://img.subeta.net/items/food_birthdaycake_angelic.gif"] { opacity: 0.66; }

.frdiv:hover a span, .frdiv:hover img, .frdiv:hover .blurb, .scode-avatar:hover, img[src="https://img.subeta.net/items/food_birthdaycake_angelic.gif"]:hover { opacity: 1; } . . . Note: there is a more simple way to select the cake and that is to add a class into the html element (class="whatevernameyouwant") and the class selector would be ".whatevernameyouwant"

Thank you so much for responding. Just to double check, the birthday cake image is also in my pet's treasure chest--this coding won't also affect that will it? Double checking because I wonder if it would double the opacity... probably not but I'll try and give it a shot in a moment here!

Edit: can't seem to get it to work; tried putting the html in different places in the page but was getting nothing. But it's okay, I think I'm gonna just keep it like it is. I think maybe it looks all right? Thank you for trying to help though! I really appreciate it. I'll try learning more about coding for future tries on other pet pages.

it wouldn't double the opacity, also just checked and it doesn't affect it the source is written differently.

The only thing I mention of html is making the birthday cake have an additional attribute (the note of adding class) the rest is CSS which needs to go into the <style></style> the first block is to show you the selector blocks already in your code that do the fading and the second part is what each block looks like with the new selectors added, the best thing to do is find each block and add the content of the brackets (, .scode-avatar, img[src="https://img.subeta.net/items/food_birthdaycake_angelic.gif"]) to those spots

Sorry I should've went way more into explanation/detail on what to do... I hope this quick addition helps....