I have a site (http://sheisbiddy.com/the-f-word/) where the Read More link jumps when you hover your mouse over it. It only started happening when I added padding to it to make it the same size as the box below. Here's the CSS:
a.more-link {display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition: color, background-color 0.1s linear; -webkit-transition: color, background-color 0.2s linear; -o-transition: color, background-color 0.1s linear;}
I'm using Safari if that makes a difference.
Well, when you hover, you're adding 10px of padding on the top and bottom that aren't there in the standard style. Try removing these elements from hover
padding-top:10px; padding-bottom:10px;
That, or you'll want to add this padding to your other style.
You want the padding to be a part of your un:hoverd selector. That way applying the padding only upon hovering doesn't add any size to the link.
a.more-link {padding 10px 0;}
Alternatively, since you're already using transitions you can add a padding transition to make the "jump" animated.
a.more-link { transition: padding 0.2s linear; }
Depending on how you want, you could add the padding to the base class like so :
https://jsfiddle.net/78s24fpw/
a.more-link { padding-top:10px; padding-bottom:10px;display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition:
Related
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary
I've been having a CSS problem. I have a div which includes a div for an image, a div containing links and a div containing a description, named as sidebar, sbpic, lks and desc, respectively.
For the image, this is the code I have currently:
#sbpic {
background-image:url('{image:Sidebar1}');
background-attachment:fixed;
background-repeat:repeat;
background-position:0px 50px;
position:fixed;
width:230px;
height:130px;
margin:10px 0px 0px -25px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#sidebar:hover #sbpic {
margin-top:305px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}
It works fine on the preview, as you can see here
But when I open up my site, this is the result here
I've tried using #sbpic:hover and changing the background position there, and I've also tried changing the background position on #sidebar:hover #sbpic. The first would only work if I hovered over the picture, and the latter would make the picture be off by 50px when it reached the bottom.
Any suggestions?
I have a menu where the elements have a simple animation on hover, changing background color and text color.
Since the element has a border with outset style, I would like to change it to inset to make it look coming forward. However the transition doesn’t seem to work for the border-style property, so the final effect doesn’t look very well, as the change in border style happens immediately and only later the background changes.
Any ideas how to make this work? I found it strange that border-style can‘t be transitioned. If so, any turnaround?
Here’s the code:
#main_menu a, #main_menu li {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
} /*Hover animation */
#main_menu li:hover { background: #4488CC; border-style: inset; }
#main_menu li {
/*GRAPHICS*/
list-style: none;
border: 3px outset #496181;
margin: 10px;
background: #333;
PS: I don’t want to use jquery for this
Your question may have been hastily written, but I think you're missing an _ in the first selector. Also, it seems that you're animating the border-style from outset to outset, so you won't see any differences. It does indeed work, I've created a demo that changes the border-color on jsfiddle for you to take a look at.
Another solution would be to create the border as a button image and stretch it in the div and just use box-shadow. That way your user will still see a smooth button movement by the transition in the shadow.
I currently have a fixed div that acts as a search bar on the top of a page, and then tile-like divs in a container div for movie posters that change opacity when moused over. However, if one of these movie poster divs are partially hidden by the search bar div they appear on top of the search bar div like so:
Is there a way to prevent this but keep the opacity change on the part that is visible?
.poster
{
float: left;
margin-left: 10px;
margin-top: 10px;
padding: 2px;
cursor: pointer;
opacity: 1;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
}
.poster:hover
{
opacity: 0.65;
}
The div the gray bar and the div the input box are in have this to keep them from scrolling with the page:
position: fixed;
You can use the z-index property to set one div above the other. The higher z-index number will be displayed above the lower z-index number.