Using CSS Circle Hover feature in Widget
-
I am using a CSS circle hover feature in text widget 9 in my secondary sidebar…when the feature is hovered over the top image rotates right, but since it is in the secondary side bar it is cut-off. Can anyone suggest a way to prevent the cut-off?
The blog I need help with is: (visible only to logged in users)
-
Also, the circle hover feature does not rotate on mobile phones. Is there a way to make it linkable with out messing up the hover rotate feature for those users accessing through browsers that support the feature?
Thanks! -
-
I surrounded my html for the circle effect with
<a href="https://karynleitophotography.smugmug.com/frame/slideshow?key=FjQwZd&autoStart=1&captions=0&navigation=0&playButton=0&speed=3&transition=fade&transitionSpeed=2" target="new"></a>so that now on mobile phones you can click the unopened/rotated top image and it will link to the slide show. Not perfect but it functions. However, it does not work on tablets and I get an extra semi-opaque bubble on regular computer screens. Does anyone have a better suggestion? I would like to add the link to the CSS, but I’m not sure I can resolve it this way? I still have the sidebar cutoff problem even though i made the images smaller. I would like to widen the sidebar…is there a way to add CSS customization to make the sidebar wider? -
Your best bet is to ask questions in the comment section on the tutorial (or see if others have asked the same thing) but here’s what I’ve noted:
– You might try scaling the effect down so that the full, expanded effect fits within your container
– You might also use one of the effects that does not need more space (the one that flips, for example)
– This will only work if the browser supports it. I’d test the tutorial demos on your mobile device / other browser / etc. and make sure the non-working result is still something you’re okay with.
I hope that helps!
-
-
I ended up giving a separate link to the slideshow beneath the hover/circle feature. I’m living with the sidebar cutoff problem for now…I may switch to the flipping feature as an alternative, unless someone knows how to widen the sidebar?
I know it is possible to replace the CSS theme (mine is oxygen), i would prefer not to do that, but it does seem i could customize the theme, with the same theme and then just modify the sidebar size…does anyone know how i would get the Oxygen theme CSS?
Thank you for all the help! -
-
@fairfieldflyfins, I think I found a simple solution.
the ‘aside’ element > id=text-9 > class=widget widget_text has a defined “overflow hidden”. You can see the results of editing this parameter in the inspector, but if you can hunt down where it is in your themes stylesheet (Oxygen > style.css) you should be able to just eliminate the line that defines it to hidden. Give that a shot. -
-
I don’t know how to delete the CSS from my theme. I know how to add to the CSS editor, but not how to delete from the theme. I think you mean actually deleting “overflow hidden” from the CSS that controls the website theme….how do i do that?
-
Is there a way to add CSS that modifies the class=widget widget_text rather than deleting it from the themes stylesheet? This is what i have tried`#text-9 .textwidget {
overflow: visible;
}`
It did not work…but I am just guessing at how it should be coded…can someone more experienced offer a suggestion? -
-
-
You bet. Thanks @mervinhernandez for the solution — I had dug around for why it was clipping but missed that somehow. Cheers, all :)
- The topic ‘Using CSS Circle Hover feature in Widget’ is closed to new replies.
WordPress.com Forums 