CSS masters please...
- Started
- Last post
- 27 Responses
- ETM0
A circle is easy -- border-radius: 50%;
Set the width of the child element the same as the parent and the height of the child to 100%. Not sure about how the text fits in exactly. Do you have a mockup?- I think i did this before with padding, which should resize with the text but i could be wrong_niko
- mg330
evilpeacock,
Many thanks for your help! I spent some time going through other CSS files, and it was indeed an issue in the js_composer.css file, which (holy hell) was around 16,000+ lines long. I simply deleted section after section after section in Safari's dev tools until I eventually saw that white background go away, then narrowed down the issue to:
.vc_row[data-vc-full-width] {
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
overflow:hidden
}It was overflow:hidden causing the issue. Switched to "none" flushed cache a few times, and problem solved. i think I'm going to have to keep this change in the actual js_composer file, which means if any theme updates take place I have to go back and modify it (an override with !important in my site css didn't work) and get it back to normal.
Holy hell, I'm so happy I / we figured this out. More to come...
- mg330
Bump for nairn and dbloc
- sausages0
^ < If you run into any more issues, here is a list of the pseudo classes: http://www.w3schools.com/css/css…
- ETM0
I think you'll require a little jquery or JS to add/remove a class, rather than all via pseudos. You can still use pure CSS for the actual transition itself.
- ESKEMA0
I dont think you can achieve what you want with css only without compromising the rollover / rollout animation.
example:
https://codepen.io/anon/pen/NRNv…having the transitions / animations whatever only on the hover state, you get the normal link coming back to the page, BUT, you also don't have rollout.
P.S. I modified the code to only use one ::before