I have a HTML form with some questions and a select tag for the answers.
I'd like to explain those answers with a tooltip.
HTML
<div id="domanda">
<div class="help-tip">
<p> some text</p></div>
This is the question:
</div><div id="scelte">
<select name="finalita">
<option value="1">Answer 1</option>
<option value="2">Answer 2</option>
</select></div>
CSS
#domanda{
font-size: 18px;
}
#scelte{
margin-bottom: 30px;
}
.help-tip{
display: inline-block;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: pointer;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 800px;
position: right;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 15px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
display: none;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}
The issue is that is showing also what's under the tooltip paragraph as you can see here
This is the picture when the mouse is not hovering
I spent a while tryin to fix it but without success. What's wrong with my css?
Adding position: relative; to the .help-tip:hover p fixed it.
Thanks to vssadineni
Related
This question already has answers here:
Keep the pseudo element in between the background and main content
(1 answer)
Avoid z-index working relative to the parent element
(1 answer)
Closed 4 years ago.
I am trying create a hover effect using CSS. Here is the link: http://creativeartbd.com/demo/test.html
Here is the code:
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
now if you run it you can see that there is style when you hover over the button. Now I want to set initial background for this button. So that IF I set the background here:
button {
background: orange;
}
If I do so then the effect is not showing.
Can you tell me why and how can I solve it?
JSFiddle
add z-index:0 to the element to create a stacking context and keep the pseudo element inside. You can then add background
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
z-index:0;
background:orange;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
You can also simplify your code like follow:
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
background:
linear-gradient(50deg,red 50%,transparent 50.5%),
orange;
background-size:250% 100%;
background-position: right;
text-transform: uppercase;
transition: all 0.5s;
}
button:hover {
color: black;
background-position: left;
}
<button class="btn-5">Button 5</button>
Good Morning,
I have this line of code:
<div class="navigation">
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div>
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div></div>
What I am trying to do is have the help-tip div go right next to the link. The paragraph appears when you put your mouse over the help-tip div. I am looking to get the paragraph to go directly under the help-tip icon in short of an overlay style. When I remove the position absolute for the both elements the icon goes right next to the icon and the paragraph goes under the icon, but it creates a massive amount of space.
Here is my css
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}
and here is a jfiddle
https://jsfiddle.net/13275tvz/1/
Need some HTML and CSS Fix
When you are making the element position absolute, make sure it's parent have the position relative property.
HTML
<div class="navigation">
<div class="link-container">
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div>
</div>
<div class="link-container">
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div></div>
</div>
CSS
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.link-container{
position:relative;
display:inline-block;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}
Style Accordingly..
Link for reference
hope this helps..
you need change position to relative, display to inline-block and desmiss top, right.
.help-tip {
position: relative;
/* top: 18px; */
/* right: 18px; */
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
display: inline-block;
}
How can I make it so that the box-shadow transforms from left to right without adding the transform effect to the text itself.
This text will change sizes depending on the content so the box-shadow needs to be adjusted accordingly.
Currently my code looks like this.
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
/*box-shadow: inset 0 -1.3vw 0 0 #00f9ff; OLD SCRIPT*/
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
</html>
What you want to do is use a pseudo element that you can animate.
I've added the animation to the hover state for better testing
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
position: relative;
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
}
#test1 a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: #00f9ff;
transition: width .2s ease-in-out;
}
#test1 a:hover:after {
width: 100%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
</html>
If you want to use animation and also the same box-shadow . Make a pseudo element with the same width,height,box-shadow as the #test1 div. Also scale it to 0 at first, and then apply the animation to it.
Using animation instead of transition will let you activate the animation on page load, not on an event like hover focus etc. Which is what i think you want
see snippet below
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-delay: 0.5s;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index:-1;
}
a {
text-decoration: none;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="container">
<div id="test1">
hello darkness my old
</div>
</div>
I am using css to create tooltip, 4 tooltips are placed sequentially, 2nd tooltip appears on the popup content of 1st tooltip
The following code is placed in between jsp file in liferay, every jsp file has the tooltip code in it. If I open the 1st tooltip, other tooltips appear on the popup content of 1st tooltip,
I need to show the popup contents without any interruption. How do I do that?
My code is
.help-tip {
position: absolute;
top: 34px;
right: 120px;
text-align: center;
background-color: #a3c2c2;
border-radius: 50%;
width: 14px;
height: 10px;
font-size: 10px;
line-height: 16px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: normal;
font-size: 10px;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
/* The tooltip */
display: none;
text-align: center;
/*background-color: #a3c2c2;*/
padding: 5px;
width: 170px;
position: absolute;
border-radius: 6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
right: -100px;
/*color: #000000;*/
font-size: 14px;
line-height: 1.4;
color: #000000;
background: #FBF5E6;
background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF);
background: linear-gradient(top, #FBF5E6, #FFFFFF);
border: 1px solid #CFB57C;
}
.help-tip p:before {
/* The pointer of the tooltip */
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #66ccff;
right: 100px;
top: -12px;
}
.help-tip p:after {
/* Prevents the tooltip from being hidden */
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.6);
}
100% {
opacity: 100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
<div class="help-tip">
<p>This is the inline edit help tip!</p>
</div>
Due to using the exact same code for each tooltip, every tooltip will have the CSS property, position: absolute; and that could be causing the problem. Try changing all the positions to relative.
How to add TEXT in the image...so that the TEXT is view-able only when the image becomes dark when mouse is placed over it.. something like ..the one given in the example image below...
Thanks for your help.
.image {
width: 250px;
height: 200px;
background: black;
position: relative;
overflow: hidden;
}
.image img {
transition: all ease 1s;
}
.image:hover img { /* Darkening effect on mouseover */
background: black;
opacity: 0.7;
}
.image .arrow { /* Creates a half triangle with top and left arrow transparent */
opacity: 0;
border-color: transparent #f2f2f2 #f2f2f2 transparent;
transition: all ease 1s;
position: relative;
}
.image:hover .arrow { /* Mouseover effect */
opacity: 1;
font-family: Roboto;
font-size: 36px;
text-align: center;
border-image: none;
border-style: solid;
border-width: 45px;
position: absolute;
bottom: 0;
font-weight: normal;
width: 0;
height: 0;
right: 0;
}
.image:hover .arrow {
border-image: none;
border-style: solid;
border-width: 45px;
bottom: 0;
display: block;
font-family: Roboto;
font-size: 36px;
font-weight: normal;
height: 0;
opacity: 1;
position: absolute;
right: 0;
text-align: center;
width: 0;
}
.image .arrow {
border-color: transparent #f2f2f2 #f2f2f2 transparent;
opacity: 0;
position: relative;
transition: all 1s ease 0s;
}
.image .arrow span {
left: 5px;
position: relative;
top: -10px;
}
<div class="image">
<img src="http://lorempixel.com/250/200/sports" />
<div class="arrow"><span>></span></div>
</div>
enter image description here
It's simple. Create some text inside your wrapper div, then order the text to display on hovering the wrapper. Below is a demo of this logic.
The HTML:
<div class="image">
<p>I'm some very interesting text!</p>
<div class="arrow"><span>></span></div>
</div>
The CSS:
p{
color: #fff;
opacity: 0;
font-weight: bold;
text-align: center;
font-size:32px;
color: red;
/* bring your own prefixes */
transform: translate(0, 50%);
transition: all .5 ease;
}
.image:hover p {
visibility: visible;
opacity: 1;
}
CODEPEN DEMO
i think you can create like this
you need to change the position of the .image class so that text div can appear overlap on that
.image-hover-wrapper {
display:none;
text-align: center;
width: 250px;
color: red;
font-size: 35px;
position: relative;
top: -125px;
background: rgba(255,255,255,0.6);
}
.image:hover > .image-hover-wrapper{
display:block;
opacity:0.8;
transition-property: animation;
transition-duration: 2s;
transition-timing-function: linear;
}
<div class="image">
<img src="http://lorempixel.com/250/200/sports" />
<div class="arrow"><span></span></div>
<div class="image-hover-wrapper">
Hii
</div>
</div>
and here is the
Updated DEmo