ambie

This worked perfectly, thank you Tuan!

Site URL: https://www.ambergchen.com/about I'm trying to change the image on my about me page when I hover over the blue highlighted text The best example I've seen of this is https://www.ivettefelixuy.com/about - screen recording attached The text is a markdown block, and I created the blue text using span... I'm not sure how to get the image to change when I hover over the text though. Outside of designing, I love creating through <span class="bio2" style="color:#326DD4">video games</span> and <span class="bio2" style="color:#326DD4">nail art</span>, scrolling through <span class="bio3" style="color:#326DD4">cat instagrams</span>, and sharing <span class="bio4" style="color:#326DD4">yummy foods</span> with family and friends.</span> I've tested some things, like sibling hover effects along these lines: .sibling-hover, #parent { cursor: pointer; } .sibling-hover:hover ~ .sibling-highlight { background-color: red; color: white; } #parent:hover .parent-highlight { background-color: red; color: white; } but I don't think the image and span text have a sibling or parent relationship.. Pass: WIP Hope this explanation makes sense, I'm so lost! Screen Recording 2022-07-06 at 1.50.09 PM.mov

Here is a screen recording to show the difference between hover transition times. Screen Recording 2022-07-05 at 2.10.20 PM.mov

Not yet! The transition time is only reflected on left-aligned images, but not for right-aligned images. I updated transition time to 2 seconds to make it more obvious on my website. Thanks in advance!

Site URL: https://www.ambergchen.com/ I'm trying to add a drop shadow transition (ease) on hover for the images on my homepage. For whatever reason, it works on the images that are left-aligned, but not on the right side. Pics are attached for reference but you'll be able to see it in action on my site 🙂 Pass: WIP Thank you in advance! Below is my code for the image hover: .design-layout-overlap .image-inset { transition-property: box-shadow } .design-layout-overlap .image-inset:hover { box-shadow: 0px 8px 12px #E0DDDC; transition: .2s ease; }