I want to increase the size of some images when hovering over them.
Please have a look at the example below. It's the option Test (3rd image):
http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html
.swatches-container .swatch-img,
.swatches-container .swatch-span {
margin:0 2px 2px 0;
}
.swatches-container .swatch-img {
border:1px solid #eee;
max-width:30px;
max-height:28px;
z-index: 0;
position: relative;
}
.swatches-container .swatch-img.current {
border:2px solid #333;
}
.swatches-container .swatch-span {}
.swatch-img:hover {
border:1px solid #eee;
max-width:60px;
max-height:46px;
left:10px;
cursor:pointer;
top: -20px;
left: -20px;
}
The problem I have is that when I hover over the third image, the div moves. How can I prevent this from happening?
Thanks
The deal is that you need to have your images positioned as absolute, so that the swatches-container is not resized if they get bigger.
Thus, you can put your images into a <div class="swatch-img-block"></div> which keep having the size of the little image, so the flow isn't modified by your growing image and your images will be absolute positioned relatively to these <div>
You can do this with this CSS:
.swatches-container .swatch-img-block
{
display:inline-block; /* displayed as inline elements */
position: relative; /* so the images can be positioned relatively to this */
width:30px; /* keeping the image size */
height:28px;
}
and by adding position:absolute in .swatch-img:hover{ }.
EDIT: looks like for compatibility issues, it is better to replace .swatch-img:hover selector by .swatch-img-block:hover .swatch-img. This way, the image is made bigger if the pointer is on the <div> containing the image (the space of the image when it is little). Also, it avoids problems with images moving out of the pointer.
Here is a working jsFiddle : LINK
you can set the img to absolute positionning when hovered, also the swatches-container have to be relatively positioned :
.swatches-container
{
position:relative;
}
.swatch-img:hover {
position:absolute;
}
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.
What I'm trying to achieve is:
to place another div - inside of that div with alignment right via CSS.
Due to various screen resolution, I wish to avoid commands "top:, right:".
How to achieve that?
<div class="non"><div class="info">Go top right</div><img src="images/top.jpg"></div>
CSS..
.non { width:400px; background-color:#d20000; }
.info { position:absolute;float:right; background-color:#efefef; }
Example here
Just do this, it should work:
.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }
I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page :)
I'm afraid I don't really know how to do this save for float: position or right: 0. I managed to achieve what you want using two positions.. relative of the containing div, and absolute of the inner div:
.non {
width:400px;
background-color:#d20000;
position: relative;
}
.info {
position:absolute;
background-color:#efefef;
right: 0;
}
Other than that, as #HashemQolami has said, just remove the position: absolute from your code, and it works fine.
I have looked around for this and it seems simple but i cant seem to work it out.
I have a div with a background.
I want the background to start 20px down and then repeat-y, as in repeat the rest of the way down.
<div class="main_col"></div>
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
}
This is what im trying but it is filling the whole div?
this is what i have tried....http://jsfiddle.net/uzi002/gqqTM/4/
You cannot do this with one class definition in current CSS2 standards.
Use a separate div for the background.
If you want to fiddle with some CSS3, you can check out
background-origin
at
http://www.css3.info/preview/background-origin-and-background-clip/
Be aware of browser support.
You might try to add padding-top: 20px to .main_col and inside it create additional div with this background.
.main_col {
width: 680px;
float: left;
background: url("your image") 0px 20px;
}
Update
this is using giker s example
try something like this
There are 3 CSS properties relevant to achieving this:
background-image { url(/myBackground.png) } // To select the image
background-repeat { no-repeat } // To choose how or if it repeats
background-position { 1px 1px } // To choose the X, Y coordinates of the top left corner of the background image in relation to the top left corner of the element.
Now, that's all quite verbose but it can be condensed into a single rule, as follows:
background { url(myBackground.png) no-repeat 1px 1px }
It is possible to use relative values (such as the % which your code shows) for the background-position, but you will need to use px.
Try using a margin padding.
i.e.
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
padding-top:20px;
}
See the complete code for this page this link, and in the end result.
My div # wrap (blue) contains the entire contents of the page, I have several divs inside it and one of them is the # leftcontent would like to stay with the height at the bottom of the page (even the # wrap div.
Basically, the red line (at bottom of page) should sit on the blue line (at bottom of page)
Add the following css rule:
div#wrap {
/* the other css rules for this selector */
position: relative;
}
And replace the css for div#powered with this:
div#powered {
font-size: 10px;
position: absolute;
bottom: 2px;
right: 2px;
}
Live test : http://jsfiddle.net/moeishaa/VB8L9/
Setting the containing element (in this case #wrap) to position:relative and then setting position:absolute; bottom:0; left:0 will work, but will require you to set a height element of some kind to your #wrap div.
It's because your div#powered has a clear:both on it. An alternate way to position that div would be to use positioning (make sure div#wrap has position:relative):
div#wrap
{
position:relative;
}
div#powered
{
position:absolute; right:0; bottom:0;
}
.clear, div.address /* removed div#powered */
{
clear:both;
}
See example →