Please check this Fiddle:
http://jsfiddle.net/5WGLs/
If you hover over basker-holder, you can see that it's child-> shopping-cart top border is not behind it's parent. It should be white. The effect I am looking for is this:
http://i.stack.imgur.com/XBV82.png
Simply add position: relative;, background-color: #fff; and z-index: 2000; to .cart-btn.This way, .cart-btn will be over .shopping-cart and the background-color will hide to border-top.
View exemple: http://jsfiddle.net/5WGLs/3/
Hope this help.
You could use z-index. Demo
But you should read What No One Told You About Z-Index, because using such large z-indices is useless.
jsfiddle DEMO
Playing with the z-index and background; we can acheive that
edited css
.cart-btn {
color: #333;
display: inline-block;
margin-top: 12px;
padding: 5px 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 30px;
border: 1px solid #fff;
position: relative;
z-index:10;
background:#fff;
}
.shopping-cart {
position: absolute;
background: #FFF;
left: 0;
text-align: left;
width: 160px;
border: 1px solid #fe4365;
top: 52px;
opacity: 0;
transform: translateY(25px) rotateY(50deg);
z-index:-1;
}
Related
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I want to create an html link that has this form:
when that link is hovered or focused that form should change its color.
The text in the link should be in the center of the link, normally that would mean display: block.
this mustn't have problems with using the same way to create a link the other direction in the same row. (I had problems with this when I used a technique with position: relative)
What I have already tried:
making a normal row and then fixing divs with height:0; width: 0; position: relative; top: 1.4rem; left: 0; border: 0.7rem solid white; border-right: 0.7rem solid transparent;, for the other direction the opposite way, but the two divs above the row didn't appeared in the same height.
making the triangles in the left not changing color when hovered or focused, but I didn't like that.
instead of using the border-hack with position: relative I used floats to fix them. This didn't worked when I also wanted to have the linktext vertically centered.
You can achieve the shape using pseudo elements like :before and :after
.box {
display: block;
position: relative;
width: 100px;
height: 50px;
background: #000;
margin-left: 20px;
color: #fff;
text-align: center;
line-height: 50px;
transition: all 0.5s ease;
cursor: pointer;
}
.box:after {
content: '';
position: absolute;
height: 0;
width: 0;
border: 25px solid transparent;
border-right: 25px solid #000;
left: -50px;
transition: all 0.5s ease;
}
.box:hover {
background: #eee;
color: #000;
}
.box:hover::after {
border-right: 25px solid #eee;
}
<a class='box'>Demo Link</a>
I have a CSS tooltip that is being cut off when the hovered item is too close to the edge of the content area. See the links towards the bottom of this post: http://blog.betbright.com/top-stories/manchester-united-v-club-brugge-betting-preview/
Here is the code I'm using for the tooltip:
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #00A1E0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltip span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 100%;
margin-left: -76px;
z-index: 999;
}
Any solutions you can recommend to stop the tooltip being cut would be appreciated.
Thanks,
Paul
You should set the overflow property on your .entry-content class to visible instead of hidden. Your current setting hides everything that does not fit within that div. Since your tooltip would be displayed partly outside your .entry-content div, a part is cut of unless you change the overflow property. So, your error is not in the tooltip, it's in a parent element.
I created a button:
http://jsfiddle.net/fy2zG/#&togetherjs=xaJ1VA8PBN
My css so far is:
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
}
My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:
When hovering out, the button shall transit to its original shape.
Is this something that can be achieved with CSS or is jQuery needed?
Working example
jsfiddle
EDIT, now with transition
jsfiddle
EDIT, now with transition on mouseout
jsfiddle
HTML
login
CSS
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
position:relative;
}
.button:after {
content: " ";
border: solid transparent;
border-width: 0;
border-left-color: orange;
position: absolute;
-webkit-transition: all 1s ease;
left: 100%;
top: 50%;
}
.button:hover:after {
content: " ";
display:block;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-left-color: orange;
border-width: 25px;
margin-top: -25px;
margin-left: -10px;
}
Can't make that with css or jQuery (unless i don't know some plugin).
Basically you must have two images. One for normal button, one for arrow shaped button. And onNover just change background image using background transition. But i think it will look ugly.
I have created a button with border-bottom of 4px. While hovering the button , I'm reducing the border-bottom-width as 0px and adding top of 4px to avoid affecting other elements below the button.
But the items below the button are moving while i'm hovering the button. Because, the blocks after the button are not considering the 4px top. So, It not looks good. How to overcome this problem..
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
}
.btn:hover{
border-bottom-width: 0px;
top: 4px;
}
I have updated my code in jsFiddle
Thanks in advance..
Use this css:
.btn{
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: block;
float: left;
box-sizing: border-box;
transition: all 0.2s linear;
margin-right: 100%;
}
.btn:hover{
margin-top: 4px;
border-bottom-width: 0px;
}
Here is a working fiddle:
http://jsfiddle.net/Hive7/5mhGt/2/
If you want to keep the border color and keep the text from jittering while animating the :hover state, try wrapping your button(s) in a relatively positioned container.
Then, update your css:
.btn-wrapper {
position: relative;
height: 100px;
}
.btn{
position: absolute;
top: 8px;
padding: 30px;
background-color: #30d589;
cursor: pointer;
border-bottom: 4px solid #1b8454;
display: inline-block;
transition: 0.2s;
}
.btn:hover{
top: 12px;
border: 0px;
}
jsfiddle: http://jsfiddle.net/BpL2A/
Updated fiddle: http://jsfiddle.net/5mhGt/5/.
The easiest way to resolve your problem is to make the border transparent:
.btn:hover {
border-bottom-color: transparent;
}
You don't have to mess with another properties like margin-bottom or so. If you decide to change the border width in the future you won't have to have this margin always in mind.