I'm trying to create a cool css3 effect where by when you hover over an image a border comes out from the middle of the image slowly. To do so I have a transparent border and then show the border and apply padding on hover, but when I add the padding it moves the image. Is there a way to keep the image from moving and still have the padding added on hover?
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
}
img{
position: absolute;
left:64%;
margin-left:-128px;
border:solid 3px transparent;
border-radius: 80px;
transition-duration: 1s;
-webkit-transition-duration: 1s; /* Safari */
}
Example - http://jsfiddle.net/kqWZZ/1/
You need to displace the padding added on hover.
It seems as though the best approach is to add a margin initially and then remove it on hover.
jsFiddle example
#dev {
margin:10px;
}
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
margin:0;
}
This essentially displaces the 10px of padding.
For positioning purposes, I changed left:64% to left:33%.
You also add a padding on hover, which moves the image. So either add the padding also to the image without hover, or dont add any padding at all.
Why not transfer the padding attribute on the image itself but not on its hovering state?
I edited your fiddle. Check it here
img{
padding:10px;
....
}
Related
I have input field with large padding. When it is focused or contains value padding is changed and this change is animated with css3 transition: all 0.5s; problem is that in chrome for transition duration element height changes from 42px to 41.998px and chrome renders that as 41px causing content to jump up by 1px during animation.
input {
padding: 10px;
transition:all 0.5s;
}
input:focus {
padding: 20px 10px 0;
outline:none;
}
<input type="text">
What's happening here is that you're actually animating 2 properties; padding-top is transitioning from 10px to 20px and padding-bottom is transitioning from 10px to 0px. Depending on various factors, your browser may struggle to animate both properties at exactly the same time - especially when the transition-property is set to all - leading to some "flickering" in the element's height as, currently, its height is calculated by adding together the line-height, padding and border.
One way to get around this would be to give the element a specific height so that that value does not have to be calculated at each stage during the transition.
input{
border:1px solid #999;
box-sizing:border-box;
height:42px;
line-height:20px;
outline:0;
padding:10px;
transition:padding .5s;
}
input:focus{
padding:20px 10px 0;
}
<input>
I want to make the padding Opaque, but opacity isn't working.
body {
background-image:url(http://i.imgur.com/apKZRmj.png);
font-family:Helvetica;
color:lightgrey;
font-size: 16px;
align:center;
padding: 20px 0;
}
Why won't this work?
according to W3 schools
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
so basically it has no color property to make it an opaque or adding some opacity, I think what you need is 'border'
ex.
border: 20px solid #000;
JSfiddle: http://jsfiddle.net/bJ2CF/2/
use background color , The padding clears an area around the content
Please take a look at this link, http://codepen.io/funhyun/pen/eLmFp .
I am trying to achieve a css3 hover animation effect where upon hovering the thumbnail, the black color overlays with the carot to click animates in. At the moment, when you hover the image, nothing happens. However, if you remove the IMG tag on line 3 of the html code, then it works. How can I make it animate with the image? Any help is greatly appreciated!!
Its working but the overlay is moved below the image.
If you remove overflow: hidden of #box, you can see it working.
you need to give position: absolute to the overlay.
check this
I have used your same code of your's.
Your problem is, that your overlay div isn't over the image, it's under it.
Solved by removing the image tag and adding the image as background-image to #box, see here
Hope i could help :)
You can use this css. it will work fine
#box { width:300px;
height:200px;
margin:5% auto 0 auto;
overflow:hidden;
position:relative;
background: #ccc;}
#overlay { background:#333;
text-align:center;
padding:45px 0 66px 0;
opacity:0;
position:absolute;
top:0px;
right:0px;
left:0px;
-webkit-transition: opacity .25s ease;}
I have a list of divs that have a one pixel outline around them, when hovered on the div the outline for that div changes color. As expected, since the divs stack on top of one another the borders stack and will become and extra pixel thicker. I add a 1px margin to the top in order to avoid this, but this ruins the hovering effect.
Here is an basic example of what I'm doing and the issue with the hover
http://jsbin.com/UcOTelUH/1/edit?html,css,output
When hovering all sides change color as they should except for the bottom since it's overlapped. Is there a way to avoid this using sibling selectors or some other trick?
You can use (see here):
div{
width: 100px;
height: 30px;
border: 1px solid #000;
margin-bottom:-1px;
position:relative;
z-index:0;
}
div:hover{
border-color:red;
z-index:1;
}
Or if you want to use the outline property instead of border, use:
div{
width: 100px;
height: 30px;
outline: 1px solid #000;
margin-top: 1px;
position:relative;
z-index:0;
}
div:hover{
outline-color:red;
z-index:1;
}
I'm setting a map up for when you hover the little orange circles, a fish will come up.
Example can been seen here, http://www.simagine.nl/kaartje
However, if you hover the far right circle, little above Australia, the hover itselfs keeps flickering and therefor the image keeps flickering also.
The CSS for this is:
a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;
}
a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;
}
Think it's a silly answer but i can't find it...
Regards
The rules in a.tonijn:hover changes the area for the a element.
You need to add a child element to you a-tag and apply the background image to that element instead.
Try this:
Tonijn<span></span>
/* Selector changed */
a.tonijn:hover span {
background: url(tonijn.png) no-repeat;
height: 83px;
width: 106px;
top: -83px; /* Value changed */
left: -26px; /* Value changed */
position: absolute; /* Attribute added */
display: block; /* Attribute added */
}
When you hover you are changing the styles for the anchor tag. I would suggest creating a div that is set to 'visibility: hidden' then on a.tonijn:hover set that same div to 'visibility: visible'
Try giving a border to your link and see it's too small to be hovered, so increase the size, see the red border I have made, I just increased the height and width of your link like
height: 20px;
width: 20px;
And place it correctly around your orange circle in such a way that orange circle comes in the center of the box, and than you are good to go