I have an issue where if I use $animate to add an animate.css infinite animation class to the parent div, here:
<div class="image-wrapper" ng-style="containerStyles">
<div class="image-helper">
<img ng-style="imageStyles" ng-src="{{content}}" />
</div>
</div>
The .image-wrapper div will animate but the image it contains will remain in place until I click the browser or change any CSS value in the inspector. Then the image snaps to where it should be animating and continues animating.
Here are the CSS styles that are also added:
.image-wrapper {
position: absolute;
overflow: hidden;
display: inline-block;
.image-helper {
position: relative;
height: 100%;
margin: auto;
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
}
This also happens if I use events instead of $animate.
Has anyone experienced something similar? Does anyone know a workaraound?
Applying transform-style: preserve-3d; to the parent element fixed this issue. It was not related to $animate.
Related
I want to put two images together like
enter image description here
with responsive.
I used relative position for this, but whenever screen become smaller, it goes like this
enter image description here
I want to use two different images because I'm gonna animate these seperately.
.img_box{
width: 100%
}
.desk {
position: relative;
width: 90%;
bottom:-30%;
}
.person {
position: relative;
width: 90%;
bottom:20%;
right: 25%;
}
<div class="img_box">
<img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg">
<img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
</div>
I tried to use absolute, but it doesn't work well for responsive I think
I would suggest creating a new stacking context by adding position: relative; to your .img_box wrapper element, then absolutely position any images ("layers") that you use inside of that new stacking context.
For example:
.img_box {
/* Setting to position: relative creates a new stacking context */
position: relative;
width: 100%;
max-width: 400px;
}
.img_layer {
/* Positions absolutely each payer inside the .img_box stacking context */
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.person {}
.desk {}
<div class="img_box">
<img class="img_layer desk" src="https://assets.codepen.io/817230/back.gif">
<img class="img_layer person" src="https://assets.codepen.io/817230/front.gif">
</div>
This way, adding position: absolute; to any layers will set their position relative to their parent (and not the document). You will be able to position/scale your wrapper element however you'd like and all children will follow suit accordingly.
You can still use .person and .desk for additional styling on the respective layers and/or setting z-index, etc., which is why I left them.
If I understood it correctly, you want to align the images to the center, both vertically and horizontally. You also want to move them together, I mean, without creating some offset between them when you resize the window. So, I would do something like this:
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container {
position: relative;
height: 100vh;
width: 100vw;
}
.desk {
width: 30%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.person {
width: 30%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
for an HTML like this:
<body>
<div class="container">
<img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="" />
<img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="" />
</div>
</body>
Take a look at
CSS Layout - Horizontal & Vertical Align to learn more about the CSS alignment, and
Layout and the containing block to learn how percentage values are calculated for positioned elements.
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
Update: it's a Chrome-only bug, as Josh Crozier figured it out.
Resize the window vertically, to see why the code below does not work. The child element does not stay at the bottom of the parent. Why?
header {
background: red;
height: 50%;
left: 0;
position: fixed;
width: 300px;
}
header div {
bottom: 0;
position: absolute;
}
<header>
<div>Lorem</div>
</header>
This is currently a Chrome bug (as of version 47 and maybe earlier versions).
It only seems to apply to elements with fixed positioning. The issue is that the elements are repainted/rending incorrectly when resizing or scrolling. It's worth pointing out that the elements are definitely repainted/rendered, but it seems like they are rendered relative to their initial position when the DOM loaded.
This behavior is likely related to issues 454216, 153738, and 20574.
One work-around would be to wrap the element and absolutely position it relative to the parent element with the same height as the header ancestor element:
header {
height: 50%;
left: 0;
position: fixed;
width: 100%;
}
header .wrapper {
background: red;
height: 100%;
width: 300px;
position: relative;
}
header .wrapper > div {
bottom: 0;
position: absolute;
}
<header>
<div class="wrapper">
<div>Lorem</div>
</div>
</header>
Because <h1> has its own margin. Try
header h1 {
bottom: 0;
position: absolute;
margin-bottom: 0;
}
I am trying to position two DIVs over each other so that when the pointer hovers over the picture the top one fades to show the one underneath. I did this here: http://quaystreet.chrisloughnane.net/
I want make it responsive so the pictures would scale to the horizontal width of the mobile device. Which is no problem with one picture but as soon as I try to re-position the underneath DIV it breaks.
http://jsfiddle.net/chrisloughnane/f2NdQ/4/
Is it possible with just CSS to do what I want?
<div id='old'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg"/></div>
<div id='new'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg"/></div>
img {
max-width: 100%;
display: block;
margin: auto;
}
Here we go,
Live Example
CSS:
.images {
width: 100%;
position: relative;
max-width: 354px;
margin: 0 auto;
}
.images img {
position: absolute;
top: 0;
width: 100%;
max-width: 354px;
}
JavaScript:
$(document).ready(function() {
$('.images').on('mouseenter', function(){
$('.images .old').fadeOut(1000);
}).on('mouseleave', function(){
$('.images .old').fadeIn(1000);
});
});
HTML:
<div class="images">
<img class="new" src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg">
<img class="old" src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg">
</div>
Some things to you know:
To make each div in front of each other I am using position absolute.
I change the whole thing you did to make the div fadeOut, I think that way is more cleaner
I change your HTML to use the absolute position.
Your img will be width 100% and max-width 354px can be any value just need to be the maximum width your img will use. So when is less then 354px he will use the whole div with 100%.
Edit:
If you don't care about browser support you can use CSS3 transitions, beware no IE<10.
Here is the answer with transition
JavaScript it's not really necessary. You can achieve the same behaviour with a smooth CSS3 transition
.images {
position: relative;
margin: 0 auto;
}
.images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 354px;
-webkit-transition: opacity .8s linear 0s;
transition: opacity .8s linear 0s;
}
.images img:first-child {
z-index: 2;
}
.images img:first-child:hover {
opacity: 0;
}
example fiddle : http://jsfiddle.net/uNkY5/1/
UPDATE 2: Making further progress. Almost there!
jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/6/
The sprite is now 99% responsive, except that the
margin-bottom: %
Does not line up perfectly as the page changes width. The
margin-left: %
Seems to work great.
Any thoughts on how to align the margin-bottom perfectly?
UPDATE: Making progress, but still not yet there.
Below is the jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/5/
The sprite image that I wanted to crop is working responsively, except it is only being cropped horizontally and not vertically.
The Code below:
<div class="responsive-sprite" style="width: 100%;">
<img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" />
</div>
img {
width: 100%;
height: 200%;
margin-left: -81.869%;
}
.responsive-sprite {
overflow: hidden;
}
Can anyone think of a way to crop this vertically as well?
Below is the original post:
Is there a way to make CSS sprites responsive?
Take a look at the attached jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/2/
Is there a way to resize this CSS sprite once the container can no longer fit the full size image?
<div class="container">
<h2 class="popular"><img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" />Featured</h2>
</div>
.container {
width: 20%;
margin: 0 auto;
}
h2 {
overflow: hidden;
position: relative;
height: 128px;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
}
h2.popular img {
top: 0;
left: -867px;
}
h2.popular img:hover {
top: -128px;
left: -867px;
}
Hmmm. Tricky.
I haven't tested but would it work to orient the sprite horizontally instead of vertically and then:
h2 {
overflow: hidden;
position: relative;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
width: 200%;
}
h2.popular img {
top: 0;
left: 0;
}
h2.popular:hover img {
top: 0;
left: -100%;
}
Edit:
Seems to work, the sprite just needs to be configured. Have a look at this JSFiddle.
Unfortunately, I think you will have to do each button individually because the image height is what determines the button height when it is resized.