I have an image inside a content area on my site, I want the image only to float up a bit when hovering anywhere inside that content area... not sure how to do that- as of right now it only moves up when mousing over the image itself- can't add the css to the entire content box as I don't want the other content to move, just the image.
(see here: http://tm26.be/healthcare/index.html - the little orange and white globes on each content panel)
the css I'm using to move the globes is this:
.img {position:absolute;bottom:-30px;right:0px; transition:.65s;}
.img:hover {bottom:10px}
Place the hover condition on the container like this:
.box1 .img {position:absolute;bottom:-30px;right:0px; transition:.65s;}
.box1:hover .img {bottom:10px;}
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!
Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.
So I'm trying to do a sliding door CSS menu -- basically one image that you move the background position on when it's hovered or when it's active.
However, usually when I move to the next link using:
#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }
It takes from the last link to whatever width I specify. See the MAP icon on the image below? I'm trying to link it so that the link doesn't go all the way from the SEND FEEDBACK link to the map button. I just want the link to be that square.
So any ideas?
If I understand correctly, you should make the link (the <a> element) a block element and give it a specific width and height (and maybe relative/absolute positioning, depending on how your layout is set up). That way, the hit area for the link will be confined to those dimensions.
Something like this for the markup:
...
Map
...
And something like this for the CSS:
#xmenu li.ypart a { display: block; width: 40px; height: 35px; }
background-position: -200px 0;
one site says it crops an image from the bottom and displays the rest part
..another site is saying its shifting the image to the left..what exactly does it do ?
I am trying to implement CSS Sprites..having problem due to this positioning thingy...this is what I have implemented so far...its not working right..I have few links and I want a diff part of the image to be displayed when mouse is moved over a particular link...I am geting output as the whole image being displayed..it wont even crop it..I tried so many things like changing positioning, adding divs..what not..now I am so lost , I dont even know where I began..Could someone plz point out what am I doing wrong here ? Why is the image not getting cropped..sure something is wrong with this positioning X,Y values....
here's the code:-
<style type="text/css">
#sprite ul{background:url(images/image.jpg) no-repeat;
width:728px;height:1225px;display:block}
#ID1{background-position:0 -1000px}
#ID1:hover{background-position:0 -1000px}
#ID2{background-position:0 -1000px}
#ID2:hover{background-position:0-800px}
#ID3{background-position:0 1000px}
#ID3:hover{background-position:0 -600px}
#ID4{background-position:0 1000px}
#ID4:hover{background-position:0 -400px}
#ID5{background-position:0 1000px}
#ID5:hover{background-position:0 -200px}
#ID6{background-position:0 1000px}
#ID6:hover{background-position:0 -200px}
</style>
HTML:-
<div id="sprite">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</div>
background-position: -157px 0; will shift the image 157 pixels to the left. It will not be cropped.
The main problem from your code is that you are setting the background image on the ul, but then changing the background position on the links. So your background position rules will have no effect as the links don't have a background. You want to instead set the same background image on all of the links, probably with something like:
#sprite ul a {
background-image: url(images/image.jpg);
background-repeat: no-repeat;
}
along with some appropriate dimensions, and then take it from there.
one site says it crops an image from the bottom and displays the rest part ..another site is saying its shifting the image to the left..what exactly does it do ?
If in doubt, trust the specification; horizontal position comes before vertical position.
#sprite ul
If you want to show part of an image as the background to a list item or anchor, then you have to set the background on that element. Here you are just putting the entire image as the background to the list itself, and everything else is placed on top of it.
Instead you need to put a copy of the image on each link.
#ID2:hover{background-position:0-800px}
You need a space between the two values
The background-position property is a composite property of background-position-x and background-position-y, so the first value is the horisontal position and the second value is the vertical position.
The position is the top left corner of the image in relation to the top left corner element, so a negative x value means that the image is placed to the left of the element, in effect cropping the image from left.
(So, the site saying that the image is cropped from the bottom has both the value order and direction mixed up.)