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?
Related
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:
So I'm trying to move a text (p) from the left side to the right by hovering nav and at the same time I want the text changes its color a second after the start of the move and it should finish during the movement. When I remove the pointer from nav the text should return to its original state. All works fine, however, I don't know how to delay ONLY the change of the color in the right way.
PS.: I want it with the GRAYSCALE!
Here is my Css
header nav p {
z-index:-100;
position:absolute;
opacity:0;
margin-top: -100px;
right: 520px;
float: right;
font-size: 35px;
transition: all 1s ease-in-out;
-webkit-filter: grayscale(90%);
color: blue;}
a:hover + p{
opacity: 100;
-webkit-transform: translate(350px,0px);
-webkit-filter:none;}
Thanks for each reply!
Change:
transition: all 1s ease-in-out;
To
transition: -webkit-transform 1s ease-in-out, -webkit-filter 2s 1s ease-in-out;
You can target specific properties by seperating their transitions with a comma, in the above, the 2s is the delay for the filter.
See it in action
moving image after hover
with chrome only!
see my page in google chrome browser: http://qass.im/teeny/
now hover all images..
Why moving image after hover?
.pin img{
width: 100%;
max-width:100%;
height:auto;
border-radius:3px 3px 0 0;
display:block;
opacity:0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pin img:hover{
opacity:1;
}
thanks.
Because of differ in image resizing algorithms (btw on my machine image center is "moved" in firefox), but not in chrome) - try to use an image of exact size you use in column 258x181px - in that case it wouldn't be resized by a browser and an effect of moving will dissappear.
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.
I am editing a design that comes with social media buttons that follow you as you scroll up and down the page. I would like that behavior to stop so they are only visible when you're at the top. I think this is the relevant code (not 100% sure):
.rt-social-buttons .rt-social-icon {
height: 43px;
width: 43px;
float: right;
display: block;
background-repeat: no-repeat;
margin-bottom: 2px;
-webkit-transition: width 0.2s ease-in, background-color 0.2s ease-in;
-moz-transition: width 0.2s ease-in, background-color 0.2s ease-in;
-o-transition: width 0.2s ease-in, background-color 0.2s ease-in;
-ms-transition: width 0.2s ease-in, background-color 0.2s ease-in;
transition: width 0.2s ease-in, background-color 0.2s ease-in;
}
.rt-social-buttons .rt-social-icon:hover {
width: 150px;
}
And the site is here.
What do I need to remove from the code above to stop the buttons from moving?
The reason the buttons are stuck with the page as it scrolls is the position: fixed on the .rt-social-buttons div.
Here's what I did to make them static on the right:
1.) The div .rt-social-buttons gets position:absolute instead of position:fixed
2.) The div .rt-social-buttons gets pulled out into the body (the .container div is relatively positioned, so absolutely positioning the .rt-social-buttons div inside will not allow it to be positioned at the same place.