Sela Theme – color overlay on menu and widget images

thepictureladylaurakathryn · Member · Jan 14, 2015 at 3:21 am
Copy link

Add topic to favorites
Is there a way I can get the font to change color when I hover the mouse over my menu titles?

Also, is there a way for me to add a color overlay and text to appear when I hover my mouse over the pictures in my widget columns?

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 14, 2015 at 9:19 am
Copy link
This styles overrides the hover and focus colors for menu items for both main menu items and Portfolio submenu items.
```
main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a {
 color: red;
}

.main-navigation ul ul > :hover > a {
    color:red;
}
```
If you need a different color for each menu item, please let me know. In that case we need to target each menu item individually and add specific color.

It looks like you have three image widgets, one for each collection. So add some text for title property in the image widget. This text will then showup as a tooltip when you hover mouse over the images. We can then try to apply some CSS and see if we can change the style of the tooltip.
thepictureladylaurakathryn · Member · Jan 15, 2015 at 3:06 am
Copy link
Thanks for the code to the hover and focus colors.

I did what you said about adding text to the title property of my widget. I like the idea, but could we possibly also have an overlay of color when the mouse hovers the image?

Thanks again.
staff-happychia · Staff · Jan 15, 2015 at 9:13 am
Copy link
We can’t apply color to an image element. Color is only for the text.

Could you try opacity instead and see if you like it. Feel free to change value between 0 and 1.

0 is transparent and 1 is opaque.
```
aside#image-5 img.alignnone:hover {
    opacity: 0.5;
}
```
thepictureladylaurakathryn · Member · Jan 16, 2015 at 2:13 am
Copy link
That’s good enough :) Do I just copy the code here and change the number of the image to make all the widgets like this?
staff-happychia · Staff · Jan 16, 2015 at 9:55 am
Copy link
I combined the styles for the three images into the following. Please remove the earlier style and add just this:
```
aside#image-5 img.alignnone:hover, aside#image-6 div.alignnone:hover, aside#image-7 div.alignnone:hover {
    opacity: 0.5;
}
```
thepictureladylaurakathryn · Member · Jan 16, 2015 at 10:50 pm
Copy link
That is perfect. Thank you ever so much for your help :)
thepictureladylaurakathryn · Member · Feb 8, 2015 at 11:24 pm
Copy link
I’m back on this topic now :)
Is there a way that instead of changing the image from one to another image entirely when your mouse hovers over the area? Right now we’ve got it where the entire image’s opacity lightens – but is there a way to have the image transition into another one entirely?

Sorry for all the weirdo questions but you’ll never know if you don’t ask ;)

THanks for your help!
thepictureladylaurakathryn · Member · Feb 8, 2015 at 11:26 pm
Copy link
This is the link that got me interested in our options:

Rollover images
staff-happychia · Staff · Feb 10, 2015 at 10:07 am
Copy link
Seems you have changed your homepage layout.

Do you still need help with changing the images on hover?
thepictureladylaurakathryn · Member · Feb 11, 2015 at 1:09 am
Copy link
Yes! I’m looking to try this out with the 3 photos located in my front page sidebar areas.
Would you like me to provide URLs for 3 other pictures we could try to do that with?
staff-happychia · Staff · Feb 11, 2015 at 9:18 am
Copy link
Hmm, images is not a problem. I can use any random image for testing.

There is some CSS quirk I am not able to figure at this time. I an not getting how to change the background image on hover.
thepictureladylaurakathryn · Member · Feb 12, 2015 at 1:05 am
Copy link
that’s all right – thanks for trying!
thesacredpath · Member · Feb 21, 2015 at 9:08 pm
Copy link
Hi there, it looks like you have gotten this figured out by using a background declaration with hover. Nice job! If you have further questions, please let us know.

No items found.