I have a Cloud of items which have all a hover state.
:hover {
opacity: 1;
border: 1px solid #333333;
}
but upon hovering all the other items get a weird re-alignment which switches back if hover is not triggered.
I tried making he padding bigger but it's still the same.
What am i missing here.
-----> http://jsfiddle.net/mMGAU/
The problem is, that the new border makes the element 2px wider. You can solve it like this:
champs-tag-card {
padding: 1px;
}
.champs-tag-card:hover {
padding: 0;
}
Demo
Try before buy
As an alternative: You could also set the border-color to transparent in the "normal" state.
On hover you add a 1px border which is not there normally. This causes your element to grow by 2px in both width and height. This causes your other elements to re-align accordingly.
You could place an initial 1px transparent border on your elements so they do not resize when the border is set.
.champs-tag-card {
border: 1px solid transparent;
http://jsfiddle.net/mMGAU/11/
border is increasing the width so go with outline property.
.champs-tag-card:hover {
opacity: 1;
outline: 1px solid #333333;
}
JSFiddle
Try adding:
border:1px solid transparent;
to .champs-tag-card. The border takes up space, and this is causing the re-alignment.
Related
I was wondering if anyone can help me. I'm trying to change the colour of my square at the bottom of my homepage it keeps on disappearing when I attempt to change the colour. I'm trying to change it to the colour white from solid red. Why does this keep happening?
Here is my codepen
Below is my CSS coding.
.next {
position:absolute;
bottom: 40px;
left:50%;
cursor:pointer;
height: 50px;
width: 50px;
border: 4px solid red;
border-top: none;
border-left: none;
transform: translateX(-50%) rotate(45deg);
}
Kind Regards,
Liam
Based on your css the arrow shape and color is set with the border property. In this case it's the right and bottom borders of your div that are given a red border, then the div is rotated to look like an arrow pointing downwards.
Update the border color to white instead of red:
border: 4px solid white;
If you were already doing the above, check in the developer console. Sometimes codepen doesn't fully update with your changes -- reload the page to try it again.
Have you tried using specifying the color as a hex value?
border: 4px solid #ff0000; //red
Using the tips found here, I successfully achieved a "slanted" div by placing a triangle overtop of an colored rectangle, however I am experiencing some strange artifacts (see below).
Notice the thin line above the colored section - it is as if the triangle is placed too low. I often use 10vh or 10%, which could introduce rounding errors with non-divisible screen/div heights, but that is speculation.
What causes this issue, and what can I do to fix it?
Triangle CSS
& {
width: 0;
height: 0;
border-style: none;
}
#container {
width: 100%;
position: absolute;
z-index: 1;
}
#top-left {
border-right: 100vw solid transparent;
}
#top-right {
border-left: 100vw solid transparent;
}
#bottom-left {
border-right: 100vw solid transparent;
}
#bottom-right {
border-left: 100vw solid transparent;
}
When I create a triangle, I specify either the border-top or border-bottom, with a corresponding negative margin. In the case above, the height was 50px:
<div id = {{attr.direction}} style = "border-top: {{attr.height}} solid {{attr.color}}"></div>
<div id = {{attr.direction}} style = "border-bottom: {{attr.height}} solid {{attr.color}}; margin-top: -{{attr.height}}"></div>
JSFiddle
It can be observed in this JSFiddle, not by resizing the view pane but by choosing a responsive view in developer options, and changing the screen size. To do this in chrome, right click > Inspect > Responsive (from drop down). This is not merely a glitch in the developer options, however, as it is observed on real mobile devices. Notice the thin red outline in the image below.
I'm trying to making the border of the an image to be red when on hover, but it's not working for some reason. What am I doing wrong?
img: hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
Remove the space after the colon. It works in Chrome and IE11, at least.
img { border: 1px solid white; }
img:hover {
border: 1px solid red;
}
<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
EDIT: As mentioned in another answer, you may want to add a white border around the image so it won't shift when you hover over it. I have incorporated that in the code snippet above.
Cant comment, but we are talking CSS here, not HTML.
Add in a border for default to fix jumpy image. U could do
img { border: 1px solid rgba(0,0,0,0); }
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
I have added a border to a button on mouse hover but this disturbs the HTML layout. How can I do this without disturbing the HTML layout?
Why not have a border there all the time, but initially have it the same colour as the background so it's effectively transparent?
Then simply change the colour on mouseover.
You can use css box-sizing property write like this:
.child:hover{
border:1px solid green;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/zFJHV/1/
or
you can use
div{
border-bottom:1px solid red;
margin-bottom:-1px;
}
EDIT:
may be you can use outline instead of border check this:
http://jsfiddle.net/zFJHV/2/
On the hover, reduce the width of the button by the pixel width of the border x2.
For instance, if the button is 100px wide and you're adding a 1px border all the way around, then on hover the CSS should be:
width: 98px;
border: 1px solid #000;
There are several possible solutions, some of which were posted in other answers.
If you want a border all the way round the element, the simplest and easiest is to add an outline. Outlines do not affect the flow of an element, but they do not work on individual sides. (Their intention is to be used for debugging rather than design.)
button:hover { outline: 1px solid black; }
The solution by Stephanie to reduce the element's width won't move other elements on the page, but since you are shrinking the element's size, the content inside will get moved. (Edit: actually in theory this could wrap some text onto an extra line and thus push some other elements down.)
You can set a negative margin on hover as sandeep said (in his original answer), which effectively cancels out the additional space used by the element. As far as I can tell this doesn't affect the flow but there could be edge cases.
button:hover { border: 1px solid black; margin: -1px; } /* all sides*/
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */
Another solution is to set the border to be the same as the background colour (as Sir Crispalot suggests), or you can make it transparent. Then change the colour on hover. Making it transparent will work on any colour background, but the background colour of the element (the button in your case) will show through.
/* for a patterned page background: */
button { border-bottom: 1px solid transparent; }
button:hover { border-bottom: 1px solid black; }
/* or, if the button has a background colour: */
button { border-bottom: 1px solid #fff; }
button:hover { border-bottom: 1px solid black; }
On hover button, add border and reduce width and height 2 px each. This will not change the layout.