I'm using some CSS I found in the wild to make flip cards. I've made a few adjustments in an attempt to make them fluidly responsive. My attempt is here:
https://jsfiddle.net/u18rhf6q/
css:
.flip-card-wrapper {
width: 50%;
height: auto;
}
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-card img {
width: 100%;
height: auto;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-wrapper:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
color: black;
}
.flip-card-back {
background-color: #c1272d;
color: white;
transform: rotateY(180deg);
}
html
<div class="flip-card-wrapper" >
<div class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://dummyimage.com/600x600/000/fff" alt="Avatar" >
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
What I hope to happen is if I adjust the width of flip-card-wrapper, the contents would expand relative to that width and the flip would continue. However, it only works if I also supply a height to flip-card-wrapper. Since the front and back are both absolute, I can't a height to bubble up. Any ideas?
One possibility for keeping your card height responsive might be to set a padding-bottom or padding-top on your flip-card-inner class. Since those heights are based on the parent's width when you use a percentage, padding-bottom: 100%; should create a perfect square. If you want to play around with the sizing, there's a good overview of aspect ratio boxes at https://css-tricks.com/aspect-ratio-boxes/.
Related
https://codepen.io/codepen19871/pen/KKQZgwQ
Is there a way to fix this behavior? I want to make sure that the div expands downward and never upward when adding text. Because of this, I need to used fixed width, but if I use fixed width, I can't make the div responsive to the size of the content. Is there a way to fix this?
.child {
background-color: rgba(255,255,255, 1);
min-width: 10%;
max-width: 20%;
top: 90px;
left: 50%;
position:absolute;
z-index: 2;
transform: translate(-50%, -50%);
overflow-wrap: break-word;
}
If I remove translate, it won't center. I also tried using other styling such as:
width: max-content;
But nothing works, there doesn't seem to be a solution that doesn't require javascript. If so, is there a way to make it work in React and make it behave like as though I used max-content?
I just need to center the div without the div expanding above, it's as simple as that.
Move child div under parent div and set Top 50%
.parent{
width: 100%;
height: 200px;
background-color: #8ae6a2;
position: relative;
}
.child {
background-color: rgba(255,255,255, 1);
min-width: 10%;
max-width: 20%;
top: 50%;
left: 50%;
position:absolute;
z-index: 2;
transform: translate(-50%, -50%);
overflow-wrap: break-word;
}
<div class="parent">
<div class="child">
234234234343434234324324343242342342343242343243423
</div>
</div>
You should use flexbox if you want to center your div, I'm not exactly sure what you're attempting to do, but here is my interpretation.
#parent {
width: 100%;
height: 200px;
background-color: green;
display: flex;
justify-content: center;
}
.child {
align-self: start;
max-width: 20%;
background-color: white;
overflow-wrap: break-word;
}
<div id="parent">
<div class="child">
100000000000000000000000000000000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000000000000000000000000000000000
</div>
</div>
I am currently working on a project that has div with a background image sliding in using a transform: translate. This div has a z-index of zero while some other sibling elements have a higher z-index to ensure they are placed on top. This seems to work fine in my landscape version. However, as this use case only has a landscape version, I am also implementing a transform: rotate when in portrait mode to ensure landscape viewing. When viewing in portrait, the background image slides in above everything, then relocates to the back. Not breaking, but sloppy, as this should be rotated anyways. However, after deployment, I was informed that there have been two instances of the image never relocating to its 0 Z-index home and breaking the usage. I have looked at https://katydecorah.com/code/z-index-and-transform/ and z-index is canceled by setting transform(rotate) and am still not sure how to approach this.
The issue only seems to occur in Safari while applying the rotate.
Rough outline of HTML elements:
<div id="root">
<div class="App ">
<div class="mainView">
<div class="navBar"></div>
<div class="mainContent">
<div class="arrowWrapper">
<div class="arrow slideInItem"></div>
</div>
<div class="alphaView">
</div>
<div class="footerBar"></div>
</div>
</div>
</div>
Some of the relevant CSS:
.App {
text-align: center;
height: 100%;
width:100%;
}
.mainView{
height: 100%;
width: 100%;
background-color: #fff;
overflow:hidden;
position: relative;
transform-style: preserve-3d;
}
.navBar{
height: 79px;
width: 100%;
display:flex;
flex-direction: row;
align-items: center;
background-color: #fff;
}
.mainContent{
display:flex;
flex-direction:column;
justify-content:flex-end;
margin-top: 18px;
height:85.25%
}
.arrow{
position: absolute;
z-index: 0;
top: 0;
width: 100%;
height: 100%;
background-size: contain;
background-image: url("../images/Page_background_Arrow.png");
background-repeat: no-repeat;
}
.arrowWrapper{
transform-style: preserve-3d;
position: absolute;
z-index: 0;
top: 97px;
width: 100%;
height: 86%;
}
.alphaView{
display: flex;
height: 100%;
width: 100%;
overflow:hidden;
position: relative;
z-index: 10;
justify-content: space-around;
}
.footerBar{
z-index: 999;
position:fixed;
top:auto;
display:flex;
bottom:0;
height: 6.15%;
width:100%;
flex-direction:row;
align-items:center
}
/* portrait lock */
#media only screen and (min-width: 100px) and (orientation:
portrait) {
#root {
transform: rotate(-90deg);
transform-origin: left top;
height: 100vw;
width: 100vh;
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
Thank you
Try setting a -1 index to the background image.
This is a very good article for z-index too What the heck, z-index??
I have the css transition working when the user hovers over item however when the mouse exits the div, content is pushed below during the transition. Below is my html/css along with a jsfiddle to show what I mean.
html:
<div id="container">
<div class="item">
<div class="img">
</div>
<div class="heading">
</div>
</div>
</div>
css:
#container {
width: 100%;
height: 100%;
}
.item {
width: 100%;
height: 400px;
position: relative;
}
.img {
background: #000;
width: 40%;
height: 400px;
float: left;
transition: width 0.5s ease;
}
.heading {
width: 60%;
height: 400px;
float: right;
background: #900;
transition: width 0.5s ease;
}
.item:hover .img {
width: 100%;
}
.item:hover .heading {
width: 100%;
background:rgba(255,255,255, 0.9);
position: absolute;
top:0;
left:0;
}
JSFiddle
I am sure it is a simple position problem. However, I am not familiar enough with the transition to know where to find the answer.
Updated position to
tranform: translateY(-100%);
in order to get rid of the non-transition property. Now before/after :hover the div heading gets pushed below item. Updated JSFiddle to show.
Updated transition: all to transition: width on both img and heading which fixed heading getting pushed below img on :hover, however the original problem of heading being pushed below when user exits :hover is still an issue.
I think I found the answer:
by making heading have position:absolute;, I can have it forced to stay inside of the item div, keeping it from moving below it. So my updated css (with actual class names and production stuff) looks like;
.flight {
height: 400px;
position: relative;
}
.flight-img {
background: red;
background-size: cover;
width: 40%;
height: 400px;
float: left;
position: relative;
/* CSS Animation Effects */
transition: width 0.5s ease;
}
.flight-heading {
width: 60%;
float: left;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: width 0.5s ease;
}
/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
float: right;
}
/* Adding hover effects for desktop */
.flight:hover .flight-img {
width: 100%;
}
.flight:hover .flight-heading {
width: 100%;
position:absolute;
top:0;
left:0;
transform: translateY(50%);
background: rgba(0,0,0,0.75);
color: #fff;
h2 {
color: #fff;
}
}
while my html looks like:
<div id="flights">
<div class="flight">
<div class="flight-img"></div>
<div class="flight-heading">
<h2>Shared Flights</h2>
<p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
<button>Book Now</button>
</div>
</div>
<div class="clear"></div>
</div><!-- End Flights -->
with a JSFiddle to show. I know the animation needs work, but I figure making it smooth will be easy now that the divs stay in one place.
I am creating a round avatar in the user's profile and intend to set the user's image in the round avatar container.
If the image is a square there will not be an issue
However, I was not able to constraint an image which is not a square image for example for this non-square image
I will get this result
This is the CSS code I am using
.avatar_container {
display: inline-block;
width: 25%;
max-width: 110px;
overflow: hidden;
}
.avatar_container img {
border-radius: 50%;
}
What can I do to always maintain a round avatar? And that the image in it won't be distorted? overflow should be hidden
UPDATE: #grenoult found a link with a great solution using css transforms. This is nicer than my previous solution because it allows you to crop tall and wide images. Check it out: http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/.
OLD ANSWER:
What you want to do is create a square container div and put the border-radius on that. Then, size the image to fit it.
HTML:
<div class="mask">
<img src="http://i.stack.imgur.com/MFao1.png" />
</div>
CSS:
.mask {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
img {max-width: 100%;}
jsfiddle: http://jsfiddle.net/V2Xjy/
This post is a bit old but another option to achieve a circular image from a portrait or landscape image is to use object-fit (which is now supported, at least for img tags in all browsers but IE).
HTML
<div class="mask">
<img src="http://i.stack.imgur.com/MFao1.png" />
</div>
CSS
img{
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
Dispite #alexvance already gave that useful link, I will add the entire code to ensure it will still remain after link becomes broken…
Example
HTML
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>
CSS
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
Kai Qing's suggestion to try max-height is helpful to include as well. This allows you to mask a 'source' image which isn't square without distortion.
http://jsfiddle.net/bw99N/2/
.mask {
display: inline-block;
width: 100px;
max-height: 100px;
border-radius: 50%;
overflow: hidden;
}
img {
max-width: 100%;
}
In my gallery, the thumbnails are 240 pixels wide, but their heights vary. Is there any way to crop the thumbnail images so that they are all 150 pixels high?
At the moment I've got this:
.gallery > div > a > img {
position:absolute;
top: 0;
left: 0;
clip: rect(0px,240px,150px,0px);
overflow: hidden;
border:none;
}
This works, but only looks good with the images on the top row as they are all aligned. The images on the other rows are not aligned because they are being placed below the original heights of the images on the row above. What do I need to add to my CSS to sort this out?
I would suggest wrapping them in a div with a set height of 150px and overflow set to hidden.
.galleryImgWrapper {
height: 150px;
overflow: hidden;
}
.galleryImgWrapper img {
/* your styles here */
}
You can use these codes for generate thumbnails without need any crops
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>