I have been working in a pop up. It's centered vertically and horizontally in the main div. I have used the following code:
CSS
#pop-up {
background-color: #FFF;
display: none;
height: auto;
left: 50%;
margin: 0 auto;
position: fixed;
top: 50%;
width: 420px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
But everytime I hover the DIV, it get pixelated. I have been reading about it and it's a Google Chrome's bug. I have tried different solutions but it didn't help me out. So, can you help me to fix it?
Related
When I am using this css to make an element center into a container then everything is ok except ie-11. In ie-11 a horizontal scroll apper bottom of the page. When i remove width:100% from this css then scroll remove but i need this width. you can see the problem in this page http://www.azayabeachresortgoa.com/wellness/
.box_center {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
z-index: 100;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-sizing: border-box;
width: 100%;
}
You can actually remove a lot of that stuff and end up with similar positioning, see
If you don't want to revisit that (I suggest you do), you can simply add:
body { overflow-x: hidden; }
Or add an overflow: hidden to one of the .box_center's closer relatives.
I'm trying to create several images on a page that are the same size, and I'd like to crop and center the source images without resizing them. I've found several answers that do what I need (like here), but they all seem to use background-image. My images, though, are made so that they are black and white and change to color when hovered over, so they are their own class and I can't use the background-image solutions.
Hope that makes sense, it's pretty late. Please let me know if there's any way to do the centering/cropping without background-image, or alternatively have the b/w->color effect on a background-image. Thanks!
If using CSS transforms is an option, it can be done even if the dimensions of the images are unknown.
They key point is that a percentage value on translate() notation is relative to the size of bounding box, while a percentage value on top/left properties refers to the size of the box's containing block.
.center-cropped {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border: 1px solid black;
margin: 0 auto;
}
.center-cropped img {
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="center-cropped">
<img src="http://placehold.it/200x200" alt="" />
</div>
It's worth noting that CSS transforms are supported in IE9+.
If your image is 200px 200px
div { position:relative; } //parent container
img {
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top:-100px;
}
I want to center a div on top of a bootstrap grid and have it remain centered with the responsive layout (regardless of screen size). Here is a bootply of what I'm trying to do. How can I center the .ontop div on the grid?
Oops should have poked around more. I found this works pretty well:
width: 80%;
height: 80%;
left: 50%;
top: 25%;
margin-left: -40%;
margin-right: -40%;
You have to apply the following:
.container .ontop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
The top/left properties move the element by 50% of the width of the parrent element horizontally/vertically. The transform: translate() moves the element back by half of its width/height.
I've used the following css to centre a div on screen (no fixed width or height so can't use defined pixel width and height and negative margins).
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I've just realised that when you have saved your details for a form in Firefox, and then try to fill in the form within my div, the pop-up Firefox creates that contains your saved details is ignoring the transform, and appearing in the location on screen where the entire div would be if transform: translate wasn't applied.
It's difficult to give an example of this because it requires you to have saved your login details to a site, but if you go to a site where you have saved details, and move the container using transform: translate, you'll see the effect.
Is there a way of forcing Firefox's pop-up to take on the transform? Or will I need to find a different way of centring my div onscreen?
Your CSS should be right, but the position should be fixed on your parent div
w3schools: position: absolute The element is positioned relative to its first positioned (not static) ancestor element
.parent{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
What kind of browser support do you need? you can solve this with flexbox!
body (or container-div) {
display: flex;
align-items: center;
justify-content: center;
}
Try this to center div on a page. It is a more elegant approach.
.center{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
height:some-height;
width:some-width;
}
I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?
Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.
I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/
May be you have to write like this:
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Check this for more http://jsfiddle.net/XSHmJ/1/
Updated:
You can use:after & :before psuedo class for this.
check this http://jsfiddle.net/XSHmJ/4/
I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.
This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
This actually worked for me. JSFiddle