This question already has answers here:
Background-size transitions in Chrome 51 - a bug or a feature?
(2 answers)
Closed 6 years ago.
I made a zoom-effect on a background of a div.
All worked till today when it stopped functioning for Chrome. For every other browser it works perfectly.
here is my code:
.project_image {
width: 582px;
height: 280px;
background-position: center;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
background-size: 100%;
}
.project_image:hover {
background-size: 110%;
}
On Chrome, when i hover the div, the background-size is set instantly to 110%, not slowly as wanted.
edit: fiddle https://jsfiddle.net/ca79cohz/
Add this changes,
.project_image {
background-size: 100% 100%;
}
.project_image:hover {
background-size: 110% 110%;
}
Related
I'm using transitions to move text when their parent element is hovered. However, the transition is not reversed when testing in Safari. This results in the text quickly jumping back to the beginning if you stop hovering the parent element before the transition has finished. If you do this in Chrome, the transition reverses back to the beginning.
Can this be fixed in Safari in some way?
GIF showing Safari & Chrome comparison
Safari not reversing clearification
Overview of CSS:
.infoContainer {
display: inline-block;
position: absolute;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
bottom: 1rem;
}
.body:hover .infoContainer {
bottom: calc(100% - 1.8rem - 1.3rem - 1rem);
}
Running Safari Version 16.1 (18614.2.9.1.12), Chrome Version 108.0.5359.98.
Expectations and attempts:
I was expecting the transition to be smoothly reversed like it is in Google Chrome. I've tried using the following CSS without success.
-webkit-transition: bottom .5s ease-in-out;
I can't comment so I will write my answer here.
You can add this
.infoContainer {
display: inline-block;
position: absolute;
bottom: 1rem;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
transition-delay: 1ms;
-moz-transition-delay: 1ms;
-webkit-transition-delay: 1ms;
-o-transition-delay: 1ms;
}
It should help on safari ;)
I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.
I have tried many ways, which have not worked.
Is there another Psuedo-element which I could use? Any help would be really appreciated.
#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Add this code to your original cta-btn:
#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Here's the CSS I'm using and I've tested it against the latest browsers.
.team-member {
padding: 15px;
background: #fafafa;
min-height: 150px;
width: 100%;
transition: linear background .5s;
border-radius: 3px;
overflow: auto;
}
.team-member:hover {
background: #eee;
transition: linear background .5s;
}
Also, you should also add vendor specific css prefix. For ex)
{
-moz-transition: linear background .5s;
-o-transition: linear background .5s;
-webkit-transition: linear background .5s;
transition: linear background .5s;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am using an element where a background image is applied. When I hover on this element the same background image should be faded a little. Can it possible without using second image.
The easiest way to do this so set a transparent layer over the element containing the image and fading this in and out. See this JSFiddle for a working example.
CSS
.example {
height: 80px;
width: 200px;
background: url(http://lorempixel.com/400/200/) 50% 50% no-repeat;
background-size: cover;
}
.example:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: 0;
position: relative;
transition: .3s all;
}
.example:hover:after {
opacity: 0.8;
}
Please note that the transition needs prefixes to work in all browsers.
HTML
<div class="example"></div>
Check this Fiddle :
.image1{
width:400px;
height:400px;
background-image: url("http://www.designsnext.com/wp-content/uploads/2014/04/nature-wallpapers-3.jpg");
background-repeat:no-repeat;
background-size:100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.image1:hover{
width:400px;
height:400px;
background-image:url("http://wallpapersshd.com/wp-content/uploads/2013/02/free-natural-wallpaper.jpg");
background-size:100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<div class="image1"></div>
I'm trying to put a transition on my background-image on hover.
This is my Code so far:
HTML
<div class="item-one"></div>
CSS
.item-one {
height: 345px;
width: 256px;
background: url('http://placehold.it/256x345') scroll no-repeat center center;
background-size: cover;
-webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 150%;
}
See JSFIDDLE
But this doesn't work for me, tested in different browsers. Other transitions like background-color work as expected. Is there any restriction for transitions on this property?
I think the problem is with background-size: cover, when you change it to
background-size: 100%;
it will work
JSFiddle
There is some other question about background-size: cover alternative, that can help Is there an alternative to background-size:cover?
Or some different solution for problems like this:
CSS3 crossfade bg image when cover is used
You have a typo:
.item-one {
...
-o-transition: background-size 1500 linear
...
}
working version below:
.item-one {
background-size: 50%;
webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear;
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 100%;
}
works fine, it didn't wokred before cuz of 'background-size:cover' :
**‘cover’:**
Scale the image, while preserving its intrinsic
aspect ratio (if any), to the smallest size such
that both its width and its height can completely
cover the background positioning area.
Try this using transform: scale(150%) for the item-one and the container set the specific size and overflow: hidden;
<div class=container>
<div class="item-one"></div>
</div>
css:
.container {
overflow: hidden;
}
.item-one:hover {
transform: scale(150%);
}
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
z-index:103 !important;
}
With this css on hover the image morphs from the original image to the hover image giving a really cool effect, in firefox and IE9 I just get a hover image replacement. I put the -webkit-transition in both selectors but i'm pretty sure it only needs to be in
.mark.studio
Specify the unprefixed version of transition; Firefox and Internet Explorer dropped the prefixes. (Note that it’s Internet Explorer 10; IE9 doesn’t support transition.)
.mark.studio {
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index: 103 !important;
}
.mark.studio:hover {
background-image: url(../images/studio_icon-hover.png);
}
I took the liberty of taking z-index and transition off the :hover state; it’s pointless to add them again. (Unless you have another z-index with !important that overrides it, which would be a really bad design.)
Internet Explorer 9 doesn't support the -ms-transition tag, it only works properly on Internet Explorer 10 and up. IE10 supports both.