I have a sprite image with the controls of my slideshow.
I want to change the background position of each control when user hovers over it, so that it looks active.
I am using:
-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;
My code is in this fiddle (apparently the bg image is not my controls but a random image).
I want the transition effect to be what someone would expect when hovering over an item (fade maybe), and not the current one that looks like the bg image actually moves.
Any ideas?
One way you could accomplish this is by placing a hidden span inside your anchor tag with the background-position set to display the area of the sprite you want to show on hover. Initially this span would be hidden with a 0 opacity.
Then, on hover, instead of transitioning the background-position you could transition the opacity to fade it in.
The code would look something like this:
html
<a><span></span></a>
css
a {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-image: url("http://example.com/somepic.jpg");
}
a span {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-image: url("http://example.com/somepic.jpg");
background-position: 150px 210px;
opacity: 0;
-moz-transition: opacity 0.45s;
-webkit-transition: opacity 0.45s;
-o-transition: opacity 0.45s;
}
a:hover span {
opacity: 1;
}
You can demo this at http://jsfiddle.net/hespb/5/
Your code changes the background position.
background-position: 150px 210px;
To make it face you need to change the background color, add opacity and animate it.
background: rgba(255,255,255,0);
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'm using css transitions to cause a fade-in and fade-out effect on a background-image property. The property gets changed via jquery when the user scrolls.
It initially did not work on any browser. I found that setting an completley empty/transparent PNG file on the original element made chrome work, but the other browsers still don't.
Here's an example of the code:
nav {
background:url(/img/empty.png);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
}
.contrast {
background:#3a3a3a url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
}
The contrast class gets applied to the nav element via jquery. It only seems to fade out on most browsers, but not fade in. It works properly in chrome.
Q1: Is there a cleaner way to do this? Adding a transparent PNG as a background element to the nav element seems like a hack.
Q2: This still doesn't work on firefox, IE or Safari. Can anyone suggest a clean fix?
You can "fake" the background-image opacity with pseudo-element on your:
nav{
position:relative;
}
nav::before{
content: "";
background: url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
transition: opacity 1s ease-in-out;
}
.contrast{ // applied on nav::before
opacity: 1;
}
Thanks to Nicolas Gallagher for this.
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/
Im setting my image src in php and controlling the styling in css. I have an image sprite but no matter what I do the image does not seem to clip to the area I want. Im just getting the whole image appear dispite my background-size being set to 24 by 24px.
Note that the img src has to stay in the HTML rather than moving to a bg-image in the css :)
A jsfiddle can be seen here
jsfiddle.net/s6UnV
Any ideas?
#swap li img {
background-position: 0 0px;
background-size: 24px 24px;
display: block;
text-indent: -10000px;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
#swap li img:hover {
background-position: 0 -24px;
}
You shouldn't use the tag img for sprites, you should use a div with a background-image to the one you would like to add the sprite effects.
I updated your jsFiddle here Updated jsFiddle
What i did was the following
Changed the Html to
<ul id="swap">
<li>
<a href="www.google.com" target="_blank">
<div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
</div>
</a>
</li>
</ul>
And added the fb-sprite class style to the css
.fb-sprite{
width:24px;
height:24px;
background-position: 0 0px;
background-size: 24px 48px;
display: block;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
.fb-sprite:hover{
background-position: 0 -24px;
}
Hope it helps
ps: you can also use the opacity effect on this one so the facebook logo doesn't disappear
out of the blue, just a suggestion.
Cheers.
EDIT: Now you can change the url of the img programtically and the style would work. Also Updated the jsFiddle
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.