I am using pure CSS based tooltip, but having display issue. The span box is hiding behind main boday and facebook like box which is in right sidebar. Below is the screenshot of the same.
Here is the tooltip CSS.
a.tooltip
{
position: relative;
display: inline-block;
}
a.tooltip span {
position: absolute;
width: 300px;
padding: 8px;
left: 50%;
font-size: 13px;
line-height: 16px;
margin-left: -160px;
text-align: justify;
visibility: hidden;
bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/
opacity: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/** CSS Down Arrow **/
a.tooltip span:after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
a:hover.tooltip span {
opacity: 1;
visibility: visible;
bottom: 30px;
z-index: 100;
}
a.imgleft {
float: left;
margin: 0 15px 10px 0;
}
a.imgright {
float: right;
margin: 0 0 10px 15px;
}
a.imgleft span, a.imgright span {
bottom: 140px;
}
a:hover.imgleft span, a:hover.imgright span {
bottom: 130px;
}
/** Span Color **/
a.ttblue {
color: #E45742;
}
a.ttblue span {
background: #E45742;
border: 4px solid #E45742;
color: #FFF;
}
a.ttblue span:after {
border-top: 10px solid #E45742;
}
any help will be greatly appreciated! Thanks
I believe we had to see more of your pages html to be able to help you.
However, the only problem I can imagine is .tooltip being in a different stacking context than right sidebar's.
Does any of .tooltip's parents/grandparents have a z-index or an opacity level set on it? It might be an opacity level. If it is, set a positive z-index on it (or if sidebar has a z-index too, a higher one than sidebar's).
Related
I want a button hover transition using an (I think) mask in the background.
A button that in normal state has a white background and black letters would have a black background sliding in from the side on hover making the letters white on the go. Like so:
I got it working using a before and after pseudo:
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
border: none;
padding: 10px 20px;
position: relative;
transition: all 0.5s ease;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
position: relative;
z-index: 999;
}
.button--slide:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: calc(-100% - 35px);
top: 0;
background-color: #000;
transition: left 0.5s ease;
}
.button--slide:after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 0px;
height: 0px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #000;
transition: left 0.5s ease;
}
.button--slide:hover {
color: #fff;
}
.button--slide:hover:before {
left: 0;
}
.button--slide:hover:after {
left: calc(100% - 35px);
}
See fiddle https://jsfiddle.net/5arj1emx/
It's not quite how I want it: I would like the background to mask the letters like in the example so that the letters turn white as the black background slides over it.
Is this possible?
do a background animation for both the pseudo element and the span and make the one of the span to color the text. I used a big transition time to better see the result;
body {
background-color: #efefef
}
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
padding:0;
border: none;
position: relative;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
display:block;
padding: 10px 20px;
position: relative;
transition: all 5s ease;
color:transparent;
font-weight:bold;
background:linear-gradient(-45deg,#000 50%,#fff 0) right/220% 100% no-repeat;
-webkit-background-clip:text;
background-clip:text;
}
.button--slide:before {
content: "";
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom:0;
background:linear-gradient(-45deg,transparent 50%,#000 0) right/220% 100% no-repeat;
transition: 5s ease;
}
.button--slide:hover span,
.button--slide:hover:before {
background-position:left;
}
<button class="button--slide">
<span>SEE OUR GLOBES</span>
</button>
I'm looking for help on how to transition a single character on a button when the button itself is hovered over as seen below:
All my attempts so far have just resulted in the whole button shifting to the right rather than the single chevron.
Thanks
Well, it's easy, You have to use pseudo-element for it eg:
Note: Don't decrease width or instead of button will move instead of the animated thing
.button {
border-radius: 4px;
background-color: red;
border: none;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
<button class="button"><span>Hover </span></button>
I need a button whose after selector expands and gets disappeared when clicked. I need this effect via CSS.
When i click this button it's after selector expands.
Like
#button::after{
transform: scale(2);
}
But this is not happening for me. Please help me. When clicked the after selector button should expand then should disappear. In a nutshell, i need button scaling effect.
Do you mean something like this?
As far as I know you can't get an onclick event with CSS only and without using JavaScript. You can use :active, but this will only apply the style when the mouse button is held down. See Bojangles answer on "Can I have an Onclick effect in CSS".
#button {
display: block;
border: none;
position: relative;
color: red;
background-color: white;
font-size: 30px;
padding: 15px 30px;
}
#button:after {
content: '';
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
border: 4px solid red;
color: black;
font-size: 8px;
opacity: 1;
transition: transform .3s ease, opacity .5s ease;
}
#button:active:after {
transform: scale(5);
opacity: 0;
}
<button id="button">BUTTON</button>
**The code snippet is built upon on benedikt's answer.
#button:after's border color is set to transparent, adds border-color during the animation. this creates the illusion that it disappears. I hope this helps.
#button {
display: block;
border: 4px solid red;
position: relative;
color: red;
background-color: white;
font-size: 30px;
padding: 15px 30px;
}
#button:after {
content: '';
position: absolute;
display: block;
width:100%;
height:100%;
top:0;
left:0;
border: 4px solid transparent;
color: black;
font-size: 8px;
opacity: 1;
transition: transform 0.3s ease, opacity 0.5s ease, border-color 0.1s ease;
}
#button:active:after {
transform: scale(2);
border-color:red;
opacity: 0;
}
<button id="button">BUTTON</button>
This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here
My animation does not seem to want to go both on and off the hover. I have tried putting the animation line on the LI:before itself and swapping the 0% and 100% but then nothing happens at all. I've been messing around with it for hours to no avail.
EDIT: Updated link, code
JSFiddle
ul {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
background-color: $base-gray-t;
margin: 1em;
padding: .25em 0 0 0;
height: 3em;
border-bottom: 0.375em solid $secondary-color;
overflow: hidden;
box-shadow: .05em .05em 1em 0;
}
li {
position: relative;
color: $base-gray-light;
padding: 0.40em;
font-size: 1.5em;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
z-index: 2;
}
li:not(.active):not(:first-child):before {
content: '';
display: block;
position: absolute;
bottom: .01em;
width: 100%;
height: 2em;
margin-left: -.4em;
border-radius: .25em .25em 0 0;
z-index: -1;
}
li:hover:before {
background: $primary-color;
animation: splash .3s ease;
bottom: .01em
}
#keyframes splash {
0% {
bottom: -2em;
border-radius: 100%;
}
100% {
bottom: .01em;
}
}
If you are trying to complete the animation which you created on hover then for that add forwards along-with your animation properties as below,
li:hover:before {
background: $primary-color;
animation: splash .3s ease forwards;
bottom: .01em
}
Check this working jsfiddle link.
The transition method is much less involved and has less scope for problems so i edited your fiddle to use that instead:
https://jsfiddle.net/6t8xLssv/1/
I simply transitioned the :before element on hover, except in the case of the active li.
li:before{
content:'';
display:inline-block;
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
transition:height 0.2s linear;
background:pink;
border-radius:5px 5px 0 0;
z-index:-1;
}
li:hover:before{
transition:height 0.2s linear;
height: 2em;
}
li.active:before{
display:none;
}
I hope this helps