For some reason my vertical alignment code is blurring some but not all child elements in Chrome and Safari.
Whats causing it is the translateY(-50%), if I remove this then blurriness is gone however the vertical centring effect is lost.
/* #group Center all the things */
.center-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.center-wrapper .center {
position: relative;
overflow: hidden;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* This fixes the blurred buttons but breaks centering
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);*/
}
/* #end */
Tried and tested methods such as below work but they break the vertical centring:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
Faced the same issue while trying to position buttons in the middle, but the button appeared on hover of the parent element and each time text inside was randomly cut.
The solution is:
.positioned-button {
transform: translateY(-50%) scale(1);
filter: blur(0);
line-height: 1;
}
Breaks nothing, fixes Chrome :)
The only way around this blurry issue, from what I could see was to change the vertical alignment method and use display: table instead. Here's how I did it:
1) Keep HTML markup the same
<div class="center-wrapper">
<div class="center">
<p>Centered content here</p>
</div>
</div>
2) Change CSS to the following:
/* #group Center all the things */
.center-wrapper {
min-height: 100%;
padding: 0;
display: table;
width: 100%;
}
.center-wrapper .center {
display: table-cell;
vertical-align: middle;
}
/* #end */
You can see the display table in action here.
.center-wrapper {
min-height: 200px;
padding: 0;
display: table;
width: 100%;
background: black;
}
.center-wrapper .center {
display: table-cell;
vertical-align: middle;
color: white;
}
.center-wrapper .center div {
height: 40px;
background: red;
width: 50%;
margin: 0 auto;
}
<div class="center-wrapper">
<div class="center">
<div>Centered content here</div>
</div>
</div>
Related
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).
I found limited examples on how to achieve triangle images via html and css, without modifying the images themselves. One example I found in this CodePen https://codepen.io/thebabydino/pen/liDCz was a step in the right direction, but looking at it, I can't find a way to make the images irregular triangles.
The result I am trying to achieve is this:
<div class='pageOption'>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/A.png'>
</a>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/D.png'>
</a>
</div>
This is the basic HTML I will be using and the CSS is:
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em;
height: 27em;
}
.option, .option img {
width: 100%;
height: 100%;
}
.option {
overflow: hidden;
position: absolute;
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
opacity: .75;
transition: .5s;
}
.option img:hover {
opacity: 1;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
Mind that the HTML and CSS I have may not be the optimal for my problem. I think the shape of the images I am using (rectangular) have something to do with this.
Would be better if the solution is better supported across browsers.
You can do it with skew like below if you cannot use clip-path:
.box {
overflow: hidden;
width: 200px;
height: 200px;
display:inline-block;
}
.triangle {
width: 100%;
height: 100%;
transform: skewX(-20deg) skewY(45deg); /* 27deg instead of 20deg to have a regular triangle */
transform-origin: bottom left;
overflow: hidden;
background-size:0 0;
}
.triangle.bottom {
transform-origin: top right;
}
.triangle:before {
content: "";
display: block;
width: inherit;
height: inherit;
background-image: inherit;
background-size:cover;
background-position:center;
transform: skewY(-45deg) skewX(20deg); /* We invert order AND signs*/
transform-origin: inherit;
}
.triangle:hover {
filter:grayscale(100%);
}
.adjust {
margin-left:-120px;
}
body {
background:#f2f2f2;
}
<div class="box">
<div class="triangle" style="background-image:url(https://picsum.photos/id/155/1000/800)"></div>
</div>
<div class="box adjust">
<div class="triangle bottom" style="background-image:url(https://picsum.photos/id/159/1000/800)"></div>
</div>
I am attempting to left align text in a div that takes the full width of it's parent.
This is the structure of one of several links created using Angular's Flex Layout.
<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
<a mat-flat-button color="primary" fxFlex href="https://example.com/">
<div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
<div class="hoverOn">
<div class="text">
Is your request causing an impact to a business-critical function, which is impacting daily production?
</div>
</div>
</a>
......
</div>
Without hovering, the .hoverOff element is visible. During hover, the .hoverOn element slides over the .hoverOff element.
.hoverOn uses position: absolute to stay hidden until hover.
Adding text-align: left to .text left aligns the text like I want but it's on the left edge of the div and not in the center with margins like I would like.
I have created an example for this and the CSS is below.
a {
color: white !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
a .hoverOn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00539b;
overflow: hidden;
height: 0;
border-radius: 4px;
width: 99%; /* Prevents flicker on bottom corners */
margin: 0 auto; /* Centers div for new width */
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Material's Standard easing */
}
.text {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: relative;
padding: 5px;
text-align: left;
}
a:hover .hoverOn {
height: 100%;
}
How can I solve this?
I'm trying to display a panoramic image with a specific size and a hidden overflow to eventually enable user-induced panning (the code is not included below).
I'm adding the image this way:
<div class="pan">
<img src="http://lorempixel.com/image_output/sports-q-c-1920-480-7.jpg">
</div>
I am setting the image size parameters this way:
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid;
}
However, when I change the width, the height changes proportionally, and I don't have any overflow to hide. The image is 13632 × 2936.
This is the result I get from the code above:
When setting the size this way, I get the image below:
.pan {
width: 400px;
height: 400px;
overflow: hidden;
border: red solid;
}
Trying to override img parameters set to 100% (for other purposes), I get a distorted image--still no hidden overflow:
.pan img {
height: 800px;
width: 400px;
transition: opacity .6s linear .8s;
}
Other code related to .pan and a container (from tutorial cited below) :
.pan img{
transition: opacity .6s linear .8s;
}
.pan img.loaded{ opacity: 1; }
.img-pan-container, .img-pan-container img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.img-pan-container{
position: relative;
overflow: hidden;
cursor: crosshair;
height: 100%;
width: 100%;
}
.img-pan-container img{
-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
position: absolute;
top: 0;
left: 0;
}
For info, I am trying to implement this example. However, I am not currently focusing my question on the rest of the panning code, as I am having issues just getting the image sized correctly with the hidden overflow.
The img child has to be larger than the parent .pan, see snippet below with an image of 1920px width and 480px height. But this will crop parts of the image.
Snippet
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid /* demo */
}
img {
display:block /* fix inline gap */
}
<div class="pan">
<img src="http://lorempixel.com/1920/480/" />
</div>
UPDATE
Based on your updated question, it is most likely you have in your css img set as max-width:100%, see the same snippet above with that property set.
Snippet
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid /* demo */
}
img {
display:block; /* fix inline gap */
max-width:100% /* YOUR ISSUE */
}
<div class="pan">
<img src="http://lorempixel.com/1920/480/" />
</div>
UPDATE OP's Comment:
This may be the case...How can I override img for only this class?
If you can't find the origin and/or want to keep the max-width:100% for other imgs you can override by using max-width:none on .pan > img
.pan {
width: 800px;
height: 400px;
overflow: hidden;
border: red solid /* demo */
}
img {
display: block; /* fix inline gap */
max-width: 100% /* YOUR ISSUE */
}
.pan > img {
max-width: none
}
<div class="pan">
<img src="http://lorempixel.com/1920/480/" />
</div>
You can try to archive cover effect for image using this css:
.pan {
...
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
JSFiddle here
I've followed this How to make vertically rotated links in HTML? but I've to improve this solution.
I need to have a vertical menu that fits the entire height of the windows and divides it in three part (cause I've three menu links to show).
How can I update the code suggested in that solution?
Try this:
CSS
#container {
overflow: hidden;
width: 50px;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: table;
}
.section {
position: relative;
height: 33.33333%;
display: table-row;
background: #ccc;
text-align: center;
}
.section .link {
display: table-cell;
vertical-align: middle;
line-height: 50px;
white-space:nowrap;
max-width:50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.section:hover { background: #ddd }
HTML
<div id="container">
<div class="section">aaa</div>
<div class="section">bbb</div>
<div class="section">ccc</div>
</div>
DEMO JSFiddle
My suggestion is to use display: table CSS property as follow:
EDITED
HTML
<div class="container">
<div class="container-child">row 1</div>
<div class="container-child">row 2</div>
<div class="container-child">row 3</div>
</div>
CSS
html, body {
text-align: center;
width: 100%;
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container-child {
display: table-row;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
CODE
the transform: rotate() allows you to rotate the orientation of the text.