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.
Related
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?
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
z-index:103 !important;
}
With this css on hover the image morphs from the original image to the hover image giving a really cool effect, in firefox and IE9 I just get a hover image replacement. I put the -webkit-transition in both selectors but i'm pretty sure it only needs to be in
.mark.studio
Specify the unprefixed version of transition; Firefox and Internet Explorer dropped the prefixes. (Note that it’s Internet Explorer 10; IE9 doesn’t support transition.)
.mark.studio {
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index: 103 !important;
}
.mark.studio:hover {
background-image: url(../images/studio_icon-hover.png);
}
I took the liberty of taking z-index and transition off the :hover state; it’s pointless to add them again. (Unless you have another z-index with !important that overrides it, which would be a really bad design.)
Internet Explorer 9 doesn't support the -ms-transition tag, it only works properly on Internet Explorer 10 and up. IE10 supports both.
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.
How to make jquery mobile collapsible content appear with animation using css transition?
.ui-collapsible {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
Not working.
jQuery Mobile's collapsible elements are shown and hidden by toggling display: none on the div of the collapsible content. As far as I know, all major browsers disable CSS transitions when the display property is changed.
An alternative would be overriding the default CSS of jQuery Mobile to always use display: block for the collapsible content div, and then transition on the height or opacity property (depending on whether or not the content needs to be "removed" from the layout).
I've created this jsFiddle, to demonstrate the transition using the opacity property. It is really just a matter of using the following CSS rules:
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
.ui-collapsible-content-collapsed {
display: block;
opacity: 0
}
Transition using the height property is a little trickier as the content div has no set height. This fiddle does the trick (also see CSS below), but it requires setting a height on the content div. You can change the height to auto, but then the slide down effect doesn't look quite right in my opinion. Perhaps someone else knows a better method.
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 2em; /* or auto */
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
.ui-collapsible-content-collapsed {
display: block;
opacity: 0
}
I think you have to Creating custom CSS-based transitions:-
Refer This