I'm trying to change a background image on hover with the transition property to make it smoother, but it isn't working. Here's what I have. It's usually enough for this to work.
#c8 {
width: 30%;
height: 300px;
background-image: url(../imgs/image1.jpg);
background-size:cover;
background-repeat: no-repeat;
border-radius: 20px;
transition: 0.4s;
}
#c8:hover {
background-image: url(../imgs/image2.jpg);
}
Related
I have a gif animation of a logo that shows the animation once when you open the website.
Now it should load that same gif again when you hover over it, making it animate again (the gif itself has just one animation cycle).
#logo a.logo {
display: inline-block;
width: 115px;
height: 115px;
background-image: url("../img/uf_logo_animation.gif");
background-size: 115px 115px;
background-position: 0px 0px ;
background-repeat: no-repeat;
}
#logo a.logo:hover {
background-image: url("../img/uf_logo_animation.gif");
}
That code doesn't work - it doesn't make the animation play again. How can I do that?
I have a parent and child div the child div has a background image. On hover the image scales and there is a transition on the transform. This is working correctly in all browsers except Safari, it seems on hover the border radius is being removed and then added again. Can anyone suggest a fix for this.
HTML:
<div class="image-box">
<div class="image"></div>
</div>
CSS:
.image-box {
width: 300px;
overflow: hidden;
border-radius: 20px;
}
.image {
width: 300px;
height: 200px;
background: url("http://via.placeholder.com/340x282");
background-position: center;
transition: transform 1s ease;
}
.image:hover {
transform: scale(1.5);
}
https://codepen.io/liannaryan/pen/ZxbZZa
For anyone having the same issue the solution is.
.image-box {
width: 300px;
overflow: hidden;
border-radius: 20px;
-webkit-border-radius: $border-radius;
-webkit-mask-image: -webkit-radial-gradient(circle, white, white);
}
This question already has answers here:
Transition background-color via slide animation
(2 answers)
Closed 5 years ago.
Hello I need to animate the changing of the background of a div, with the new background sliding down from above.
This is an example of what I can do now and the context of my question.
I need to trigger the animation by adding and removing classes:
.token {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
margin-bottom: 20px;
transition: background 1000ms linear;
}
.red {
background: red;
}
.blue {
background: blue;
}
As you can see I've already put a small animation, but I'm not sure if the slide down effect I need is possible with CSS alone.
What I would like is to be able to create multiple classes each changing the background of the div they're applied to via sliding down.
I need the animation to be triggered by adding a class, the class should contain the colour to transition to.
You can use linear-gradient for the color and you will able to create your effect by adjusting background-size.
Here is an idea:
let previousClass="";
function color(className) {
$('#token').removeClass(previousClass);
previousClass=className;
setTimeout(function() {
$('#token').addClass(previousClass);
}, 500);
}
.token {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
margin-bottom: 20px;
background-size: 100% 0;
background-position: 0 0;
background-repeat: no-repeat;
background-image: linear-gradient(white, white);
transition: 0.5s background-size linear;
}
.red {
background-image: linear-gradient(red, red);
background-size: 100% 100%;
}
.blue {
background-image: linear-gradient(blue, blue);
background-size: 100% 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="token" id="token"></div>
<button onclick="color('red')">Red</button>
<button onclick="color('blue')">Blue</button>
Is there anyway to use CSS to achieve the above effect when mouse over on the button?
Thanks!
You can achieve what you are looking for by using a background gradient:
Create your gradient with two stops at 50%, your two colours on either side of the stops.
Make your background take up 200% the width of the element with background-size
Have your background position itself -100%
Move the background into position on :hover.
Note: Be sure to include browser prefixes where appropriate.
.menu{
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
background: #F00;
display: inline-block;
background: linear-gradient(to right, #f8b3b5 0%, #f8b3b5 50%, #ffffff 50%, #ffffff 100%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s;
}
.menu:hover{
background-position:0 0;
}
<div class='menu'>Menu</div>
demo - http://jsfiddle.net/victor_007/1y2jw6wh/
added pseudo element :before and background-color
.menu {
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
display: inline-block;
position: relative;
}
.menu:before {
content: '';
background: #FFADAD;
position: absolute;
width: 0%;
top: 0;
left: 0;
height: 100%;
transition: 0.3s linear;
z-index: -1;
}
.menu:hover:before {
width: 100%;
}
<div class='menu'>Menu</div>
There is, a working fiddle here: http://jsfiddle.net/84fpp167/
You basically make a wrapper div, position the div you want to slide absolute to it. Then you use the :hover on the wrapper div to transition the absolute position of the slide div untill the position is left:0 with a speed of 1 second.
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: #FFADAD;
transition: 1s;
height:100%;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
At first search the stack
You must read about css transitions, you will be use ease-in and background-color properties.
http://www.w3schools.com/css/css3_transitions.asp
Nobody gone code it for you, make an effort and do somethibg with your own.
The transitions showroom - http://codepen.io/davekilljoy/pen/wHAvb, mess with the code to make desired effect. Njoy !
Post with the similar problem :
form stack search 1
form stack search 2
I'm trying to build a circular region with a hidden panel that slides up inside of the circle. This seems to work perfectly on Firefox, however, with Chrome/Webkit there is no 'masking'. I'm assuming there's some sort of CSS trick to this but I've been banging my head against a wall thus far...
http://jsfiddle.net/HQDdR/1/
You could use radial gradients and then you wouldn't even need the container and the holder - DEMO.
Relevant CSS:
#top {
overflow: hidden;
width: 300px;
height: 300px;
border-radius: 50%;
}
#slider {
height: 600px;
background: radial-gradient(circle, gainsboro 70.71%, transparent 70.71%)
no-repeat 0 100%;
background-size: 300px 300px;
transition: .3s;
}
#top:hover #slider {
height: 300px;
}
I've animated the height of the slider, but you could also animate the background-position.