The problem started on the last Chrome update, since then the images crop and just do not render properly, but not all of them, just a couple.
I am using them this way:
.ch-info > div {
text-align: center;
display: block;
position: absolute;
width: 100%;
height: 105%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
Inside the div I have this class which provide the background image.
.img-1 {
background-image: url(../images/icons/name.svg);
background-size:cover;
}
I have no idea how to fix it. I have seen that applying fixed sizes on the image solves it but the same size do not work for all the pics and I would wanna know what can be the problem. I was thinking that may be something related to changes on how the CSS property works since update but it's just a theory.
This happens only on Chrome.
Related
here is my code for filling the tank
const filler=(props)=>(
<div className={Classes.filler} style={{height: `${props.percentage}%`}}></div>
);
here is the css code for my filler
.filler{
background: url('../../../../assets/image/dark.png');
background-size: 180%;
transition: height 1s ease;
background-position: 0px 0px;
width: 100%;
transform-origin: 0% 100%;
background-repeat: no-repeat;
}
the problem which i am dealing with is that instead of the image of water increasing from down to top it increases from top to down. I tried by transforming the origin of the image but it did not worked.
Here are some images for reference.
Here i want the image to rise from the lower border but it is increasing from top to down
Can you try this. I'm not sure what triggers the animation, but in this example i'll just assume its hover to a link.
.filler{
background: url('../../../../assets/image/dark.png');
background-size: 180%;
width: 100%;
background-repeat: no-repeat;
height: 0px;
overflow:hidden;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
position:absolute;
left:0;
bottom:0;
}
.animationstart:hover{
height: 200px; /* max height */
}
I have a full screen width background on my site, but I want to replace it with an image slideshow..everything works correctly, but when the images load in, they become all distorted.. I think it has something to do with the width/height being 100% and also with the "background-size: cover". Further explaination would also be awesome.
I'd like to make the image div fit exactly in the parent div as the "background-image:" property of does. Any help would be appreciated. Thank you very much!
Image DIV CSS:
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
Parent DIV CSS:
.main-content {
margin-top: -5px;
display: inline-block;
content: "";
position: relative;
padding-top: -5px;
height: 300px;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background-image: url(../content/images/header_bg.jpg) no-repeat center center;
background-size: cover;
z-index: 0;
}
They get distorted because you forcefully set their width and height to 100%.
You should use min-width and min-height instead and center them with the translate transformation.
#crossfade > img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
Additionally there are no negative paddings
I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.
The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}
You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>
the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.
My goal is to have a zoom in effect when a user hovers over an image on my page. I have found code that has this effect;
.transition {
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
#content {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
Adding the transition to the content when the user hovers over the image.
The problem that I am having is using this technique combined with object-fit: cover. I want the image to fit into a fixed size box (Height: 250px; Width: 25%), while maintaining its aspect ratio (which is accomplished using object-fit: cover).
But, when a user hovers over an image with object-fit: cover, it reverts back to its old aspect ratio, does the zoom, and then goes back to the proper aspect ratio. This leads to some very odd visuals, which can be seen in the following fiddle;
http://jsfiddle.net/y4yAP/982/
Removing the object-fit: cover on #content will fix the problem with the zoom, but distort the aspect ratio.
Any idea how to fix this?
object-fit:cover isn't widely supported and I'm not very familiar with it, I don't know if you are required to use it but I tried something I am more familiar with.
If all the images are 'landscape' then you can use width: 100% and height: auto and the CSS will maintain the aspect ratio for you. To position the images centered in the container I applied position: relative to the container and position: absolute to #content. See: https://css-tricks.com/almanac/properties/p/position/
For the zoom you can just use #content:hover { ... } in your CSS (unless you need jQuery for other purposes).
HTML:
<div id="imageDiv">
<img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>
CSS:
#content:hover {
-webkit-transform: translateX(-50%) translateY(-50%) scale(1.6);
-moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
-o-transform: translateX(-50%) translateY(-50%) scale(1.6);
transform: translateX(-50%) translateY(-50%) scale(1.6);
}
#content {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
#content {
position: absolute;
top: 50%;
left: 50%;
height: auto;
width: 100%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#imageDiv {
position: relative;
height: 250px;
width: 450px;
overflow: hidden;
}
FIDDLE (sans js): http://jsfiddle.net/pqs4vef7/2/
Please check all you need to do is the the width to "max-width", and remove the object-fit:
www.jsfiddle.net/y4yAP/985/
I have transform css applied to a line of text (font-size), but it animates from the left side, I want it to animate from the center. I am using Bootstrap framework so the div is vert/horiz centred.
HTML
<article class="col-md-12">
<div class="lg-indx-img">
<div class="cat-icn">
<?php the_title(); ?>
</div>
</div>
</article>
CSS
article {
position: relative;
margin-bottom: 10px;
width: 100%;
}
.linkage {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.lg-indx-img { padding: 20% 0; }
.cat-icn {
position: absolute;
z-index: 9;
left: 50%;
top: 50%;
opacity: 0;
font-size: 15px;
color: #fff;
text-align: center;
transform-origin: 50% 50%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.linkage:hover + .cat-icn {
opacity: 1;
font-size: 25px;
}
when .linkage is hovered the title in .cat-icn increases in size. I don't know the length of the text line since it's generated by Wordpress post.
EDIT - The top picture is what it does now, the bottom picture is what I want it to do
Instead of setting a new font size, you can try using the transform property, which should do the right thing since you have transform-origin already set to the center.
.linkage:hover + .cat-icn {
transform: scale(1.5);
}
Try this out.
http://codepen.io/Chevex/pen/bdRvvJ
.linkage:hover + .cat-icn {
opacity: 1;
transform: scale(3);
}
Instead of animating the font size, animate the transform property instead. Then in your hover rule use the transform property to adjust the scale of the element.