I need to place the image inside the div. I know there are img-responsive center-block classes but they resize the given image for some reason. Is there a way to achieve the same goal but without size distortions.
Note: the containing div is a bootstrap column with given classes: hidden-xs col-lg-9 col-md-6 col-sm-6.
Thank you
CSS is my friend
can you try this CSS class
HTML
<img class="centerd-image" src="">
or
<div class="centerd-image">
<img src="">
</div>
CSS
.centerd-image {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Use css for the img class as
width: --%;
margin-left:auto;
margin-right:auto;
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.
Im using transform to center a carrot for a dropdown menu and its working perfectly on every browser except IE
HTML
<div class="row ccu-faq-q-row">
<div class="ccu-faq-question">I’m not crazy about the new name. And I resent all the money --- has spent on naming the ----. How can I register my protest?</div>
<div class="ccu-faq-btn"><img class="faqArrow" src="img/ic-arrow.svg"></div>
</div>
css
.ccu-faqs .ccu-faq-btn img {
left: 50%;
position: relative;
top: 45%;
width: 24px;
-webkit-transform: translate(-50%, -50%);
-moz-box-shadow: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
I've got an image which will scale on hover. However, at the same time the image get's translated to -50% on both the X and Y axis, or in some cases, only on the X axis.
Is there a way to inherit the previous transform while still changing one of the values?
.container {
position: relative;
height: 400px;
width: 640px;
overflow: hidden;
}
img {
-webkit-transform: translate(-50%,-50%) scale(1);
transform: translate(-50%,-50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
transition: 500ms;
}
img.special {
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
top: 0;
}
img:hover {
-webkit-transform: translate(-50%, -50%) scale(1.1);
transform: translate(-50%, -50%) scale(1.1);
}
<div class="container">
<img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
<div class="container">
<img src="http://www.lorempixel.com/640/400/abstract" class="special" alt="test image" />
</div>
TL:DR;
Is there a way to inherit the original transform settings, while still changing one of the values?
I'm not looking for answers adding extra css, classes or whatever. I'm just looking for a way to keep this as short as possible. I've already solved this using extra classes and CSS.
Is there a way to inherit the original transform settings, while still changing one of the values?
No, there is no way to do this in CSS. CSS transform property declarations (like all other properties) are not additive. The latest setting (or) the one which is more specific will completely override anything else specified and hence there is no chance to inherit some values and add on top of it.
The only alternative with pure CSS is to add an extra wrapper and apply one of the transforms to it. In this way, the img:hover styling (the scale) need not be repeated and can be left as common for all.
.container {
position: relative;
height: 400px;
width: 640px;
overflow: hidden;
}
.wrapper {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.special.wrapper {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 0;
}
.wrapper img {
transition: 500ms;
}
img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="container">
<div class="wrapper">
<img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
</div>
<div class="container">
<div class="wrapper special">
<img src="http://www.lorempixel.com/640/400/people" alt="test image" />
</div>
</div>
The other way would be to use JavaScript, find out what is the current transform on the element, then append the extra transform on hover and apply it via inline styles.
<div class="button button-icon topPull">
<div class="button button-icon"><i class="icon ion-android-cart"></i><a class="icon-circle icon-circle-outline">
<i>{{cart.length || 0}}</i>
</a><div> </div>
Now, I want ion-android-cart to be placed near the bottom of the button and anchor link to be at the right top edge of the icon . How do I apply this CSS here?
By default, these appear at the top left corners one after the other.
Use this code-snippet:
.button {
position: relative;
}
.button i {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
The icon will always stay in the absolute middle of the button.
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;
}