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?
Related
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);
}
I am trying to place an image using png css sprite which i created from website http://css.spritegen.com. The problem is image container is expanding up very much in firefox and IE browsers but working fine in Chrome.
The below styles have been applied
background: url('https://coinswitch-static-resource-dev.s3-ap-southeast-1.amazonaws.com/ui/public/images/cspro-sprite.png') no-repeat;
overflow: hidden;
text-indent: -9999px;
text-align: left;
background-position: -10px -0px;
width: 996px;
height: 996px;
zoom: 0.03;
-moz-transform: scale(0.03);
-moz-transform-origin: 0 0;
Here's a demo url https://codepen.io/amitasaurus/pen/QWWYgXW .
I want an Image to disappear and another to appear at the same place with same size on hover. Therefor I hide the orignal image and create a background image instead. The problem: The background image does not auto scale. If I dont set a specific height it has no height (means no image visible).
You can see the problem here if you scroll down a bit: https://www.ergotopia.de/
My current CSS:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
height: 240px;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{display:none;}
Use opacity instead of display on image. Then you don't need to set height:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{
opacity: 0;
}
Because of the height/design of this company's logo we created an header image that includes it. That header image is located here:
http://tinyurl.com/oqkpvff
Anyone know how to make that header image resize automatically for mobile/smaller tablet?
#title-container {
background-image: url("url of our image is here") !important;
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
}
I did try height: auto but that didn't work either.
You can use the background-size: contain;
Demo
#title-container {
background-image: url("http://tinyurl.com/oqkpvff");
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
background-size: contain;
}
contain
This keyword specifies that the background image should be scaled to be as large as possible >while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.
When I replace background image mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg with sprite image sprite_mbg.png and also add background-position to css of input, the button color become mixing due to the width and position.
/*Sprite Image generated by Instant Sprite - Generate CSS Sprites Instantly*/
.sprite { background: url('http://s13.postimage.org/xmzbbctt1/sprite_mbg.png') no-repeat top left; width: 40px; height: 40px; }
.sprite.mbg { background-position: 0px 0px; }
.sprite.mbgh { background-position: -50px 0px; }
.sprite.mbgg { background-position: -100px 0px; }
.sprite.mbgr { background-position: -150px 0px; }
I changed to vertical sprite and it solved the problem.