I am having a question regarding the tooltip, the tooltip is hiding behind the table heading or it is displaying in one box it is not showing out.
Please, refer to the image where the tip is hiding behind the another div
(marketing shown in image is in the tip):
.tooltipCustom {
position: relative;
display: inline-block;
}
.tooltipCustom .tooltipCustomtext {
visibility: hidden;
width: 120px;
background-color: #efeee6;
color: #868474;
text-align: center;
border-radius: 6px;
padding: 5px 0;
border-width: 1px;
border-style: solid;
border-color: black;
/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltipCustom:hover .tooltipCustomtext {
visibility: visible;
}
<div class='tooltipCustom'>
<sup style="vertical-align: top">
Something
</sup>
<span class='tooltipCustomtext'>
Underlying price: List price <br/>
Applied Discounts: Marketing
</span>
</div>
Fix it
/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;
For example
/* Position the tooltip */
position: absolute;
top: 20px;
left: 50%;
margin-left: 0;
I think that the div above has a z-index defined, you need to put a higher z-index value on your tooltip to be on the front of previous div:
.mypreviousDiv {
z-index: 100;
}
.tooltipCustom .tooltipCustomtext {
z-index: 101; // ou higher, for tooltips we can put 9999
}
Related
Here is the situation:
I am using the following CSS to darken a cover-image, so I can write a headline on it. The button-style however doesn't apply when using it within the ::before container.
HTML
<main class="zimmer-cover-dark">
<div class="zimmer-cover-inside">
...
</div>
</main>
CSS
.zimmer-cover-dark {
position: relative;
height: 65em;
}
.zimmer-cover-dark::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(resources/img/7.jpeg);
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: brightness(35%);
}
.zimmer-cover-inside {
position: relative;
padding-top: 18em;
}
Now I want to add my button as follows:
HTML
<main class="zimmer-cover-dark">
<div class="zimmer-cover-inside">
<a href="">
<button type="button" class="custom-btn-open">
Book Now
</button>
</a>
</div>
</main>
CSS
button {
font-weight: 400;
border: solid 2px #585858;
outline: 0;
padding: 1rem 4rem;
font-size: 1.25rem;
letter-spacing: 0.00rem;
background-color: white;
border-radius: 0.35rem;
position: relative;
cursor: pointer;
}
button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #a9c7b1;
z-index: -1;
border-radius: 0.35rem;
border: solid 2px #919191;
transition: all 0.3s ease-in-out;
}
button.custom-btn-open::after {
top: 0.5rem;
left: 0.5rem;
}
The button sadly doesn't appear in the right format. It just stays white and not the intended style. Whenever I insert the button outside a ::before div, it works. So I wonder, how to I approach this situation, and is there a way I can use both pseudo-elements together?
sorry i did not read your code, my eyes got catch by the z-index -1 of your ::after, may it be the problem?
I want to add some pizzazz to some banners... my banners are simply an h1 element with a background color property that stretches the legth of the containing element.
Here is my CSS:
.banner {
position: relative;
z-index: 1000;
padding: 20px;
}
.banner-blue {
background-color: #93DEFF;
color: #222222;
}
.banner-yellow {
background-color: #FFF072;
color: #777777;
}
.banner-red {
background-color: #FF356B;
color: white;
}
And I would apply it like this:
<h1 class="banner banner-yellow">I'm a banner!</h1>
My problem:
I want to overlay a copy of the banner background but change the color and rotate it slightly on the z-axis to get an effect like this.
However I can't work out how to do that using the ::before (or is it ::after) psuedo-elements to do that... here is what I have tried:
.banner-red::before {
display: block;
position: absolute;
padding: 20px;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(3deg);
width: 100%;
margin-left: -30px;
}
Here is a codepen of it running: not looking too good: https://codepen.io/jethazelhurst/pen/JyKqRB
Just rotate your box in the opposite direction: transform: rotateZ(-3deg);
You can set the top and left value in order to place your rotated box correctly.
.banner-red::before {
display: block;
position: absolute;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(-3deg);
width: 102%;
height: 97px;
margin-left: -30px;
top: 2px;
}
Of course you can change the colors: your horizontal box is #91c6ff and the rotated one is #91c6ff. Also, they are transparent.
Here's a fork of your project: https://codepen.io/anon/pen/zdBVGe
And with the colors:
Make a element with another child element for text, span for example. Then you can set z-index on span so that text is above pseudo element.
div {
background: #91C6FF;
padding: 25px;
margin: 40px;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(135, 171, 255, 0.7);
transform: rotate(-4deg);
}
span {
position: relative;
z-index: 2;
font-size: 30px;
}
<div><span>Lorem ipsum dolor.</span></div>
I am trying to achieve two hover effects on an image.
First, when the user hovers over an image a plus icon on the top right corner of the image appears.
Second, when the user hovers over the plus the icon changes to: “Add to collection”.
All these events need to be smooth transitions.
My first problem is I can't get any smooth transitions going for the first hover.
My second problem is I have no idea how to achieve the second hover - I've done a lot of Google searches but this doesn't seem to be a common effect.
Here is the code I have tried so far (with fill murray placeholder image):
HTML:
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
</a>
</div>
CSS:
.item-link:hover:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 10px;
right: 10px;
}
And here is the js fiddle
Here is the screenshots for what I want to achieve with the second hover:
Just did a little bit changes in your mark up and and find a solution for your issue. Yes, It's not possible to :hover a pseudo-element. Added a new div btn-plus and a span text for convenience. This is done using pure css. Hope this helps :)
.btn-plus:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 0px;
right: 30px;
z-index: 1;
}
.btn-plus{
position: absolute;
display: block;
width: 200px;
height: 58px;
top: 30px;
right: 0;
opacity : 0;
transition: all ease .5s;
}
.item-link{
width: 100%;
height: 100%;
display: block;
}
.item-link img{
width: 100%;
}
span.text{
position : absolute;
top: 0px;
right: 0px;
color: #fff;
padding: 15px;
width: 150px;
height: 30px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
transition: all ease .5s;
opacity : 0;
}
.item-link:hover .btn-plus{
opacity : 1;
}
.btn-plus:hover span{
opacity : 1;
right: 30px
}
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
<div class="btn-plus">
<span class="text">Add to list</span>
</div>
</a>
</div>
Hey guys I am relatively very new to HTML and CSS and have the following difficulty I made a small input box and I am trying to add a few CSS transforms and create a small animation on the input box. Code below:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.input {
position: relative;
display: inline-block;
max-width: 350px;
width: 100%;
}
.akira-input {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
background: transparent;
z-index: 10;
}
.akira-label {
display: block;
height: 100%;
padding: 0;
width: 100%;
background: #696a6e;
color: #cc6055;
cursor: text;
}
.akira-label:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: red;
-webkit-transform: scale3d(0.97, 0.50, 1);
transform: scale3d(0.97, 0.50, 1);
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.label-content {
color: #000;
font-size: 1.3em;
text-transform: uppercase;
position: relative;
display: block;
text-align: center;
padding: 1.6em 0;
width: 100%;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
<span class="input">
<input type="text" id="akira" class="akira-input">
<label for="akira" class="akira-label">
<span class="label-content">Akira</span>
</label>
</span>
My difficulty is, if I apply position:relative to <span class="label-content">Akira</span>, it shows, if I remove position:relative , that element disappears from view.
My question is why is position:relative functioning like z-index?
Can somebody elaborate ??
EDIT :: refering to Justinas answer , i have the folloing question ,
Does applying position:relative places an element
higher in the stack , even without applying z-index ??
z-index is only working for non-static elements, so when you remove position: relative than element becomes statically positioned and moves below higher index elements (disappears from view). When you add position: relative to element, than z-index will take effect and so element appears in your view.
Also position and z-index is two different properties
position - how element is positioned according to other elements on page. Default to static
z-index - how high element is in z-axis (z-index: 2 - is behind element with z-index: 10). Default to 5
.wrapper {
position: relative;
}
#static {
position: static;
z-index: 999;
width: 400px;
height: 150px;
background-color: #ddd;
padding: 3px;
}
#top-1 {
position: absolute;
z-index: 10;
left: 8px;
top: 45px;
width: 330px;
height: 80px;
background-color: #888;
padding: 3px;
}
#relative {
position: relative;
z-index: 11;
background-color: #88a;
width: 330px;
height: 80px;
padding: 3px;
top: 30px;
left: 8px;
}
#top-2 {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 400px;
height: 150px;
background-color: #dda;
padding: 3px;
}
<div class='wrapper'>
<div id="static">
I'm static, so behind #top-1, but have z-index higher than #top-1... Means z-index has no effect.
<br/>Text that is not visible, because behind #top-1 element
</div>
<div id='top-1'>
I'm above #static, because i have non-static position, so my z-index has effect.
</div>
</div>
<hr/>
<div class='wrapper'>
<div id="relative">
I'm relative and above #top-2, because my z-index higher than #top-2... Means z-index has taken effect.
</div>
<div id='top-2'>
I'm below #relative, because i have lover z-index.
<br/>Text that is not visible, because behind #top-1 element
</div>
</div>
z-index only works on positioned elements so position:absolute, position:relative or position:fixed
It does not behave like a z-index, because z-index specifies an ordering rule, but not the way how the element is displayed.
position: relative; says to go to the relative mode where it can compete the absolutely positioned elements.
Your problem here is that :before pseudo-element is a hierarchical sibling of span, and it takes the whole available parent width. So it fully covers a static span element.
When you make it relative, it becomes shown because when z-index is not specified for both non-static elements they are shown in the same order like they are placed in HTML (so element which is defined in HTML later is always on top).
Your structure is:
label
:before
span
so the span becomes visible.
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/