@SrHatcher
Posted
Hello Karthikeya!
You are making a great work. don't worry if you struggle making projects. When you struggle it means that you're going the right way to be better in the future!
Personally i used this setting to make the blue background when you hover the image: Background-color: hsla(178, 100%, 50%, 0.5), you could try it. hsla allows you to use oppaticy in your colors at the final setting: 0.5.
To use the fonts for the project you can get them from google fonts, i've seen that every project on frontendmentor uses google fonts for the font-family. if you don't know how to use google fonts yet you can watch this tutorial: https://www.youtube.com/watch?v=qgmLDPLApBY
You can use this CSS rule to make the project more inmersive: cursor: pointer, so that when you put the mouse on something that is supposed to be some kind of link the cursor of the mouse will change to a pointer icon.
I couldn't understand your third point: I was not able to link the three hover items so that.... if you'd like to explain it again maybe i can help you.
Marked as helpful
@karthik5860
Posted
@SrHatcher i wanted to link three hover items so that the image will change color even if I hover over name and title
@SrHatcher
Posted
@karthik5860 oh i see, i can't think in a way to do that without using Javascript. I would add a addEventListener("mouseover", activateAllHoversFunction) to know when the cursor is over the element that i want to trigger all hovers. In the activateAllHoversFunction i'll add the code to manipulate the desire elements in my DOM and active the hover classes (when i say active the hover classes i'm saying that i would add a class to those elements, not active the :hover pseudoclass exactly). Sorry if it's hard to understand, i'm not very good at explaining JS code. Hoping you find it useful :)
Marked as helpful
