I've been trying to create the following: Showing an image and when hovering over it, on the image a score will show, which fades in. I'm almost there, except for the fading in part.
My CSS:
.profile-image10 {
opacity: 1;
}
.profile-image10:hover .overlay {
position: absolute;
width: 100%;
height: 100%;
left: 510px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0.1;
}
<div class="profile-image10">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" />
<span class="overlay"></span>
</div>
I've created this fiddle:
https://jsfiddle.net/1wusom4m/
As you can see it currently fades out when hovering, which is the opposite of what I want. So of course the opacity is set the wrong way around, but if I set it to a low value in the .profile-image10 it affects the original image as well. I'm quite new to this, so have been experimenting a lot to get this far, but I'm stuck now. So how can I make it fade in the score when hovering over the image? Or am I approaching this all wrong?
Three things.
Don't depend all style properties for your overlay on :hover state. Only those you want to change on :hover of the image.
Always define the transition property for the original state. You can change the reverse transition by additionally specifying it on the :hover state.
You div is a block level element, which by default grabs as much horizontal space as available. Putting the :hover on the div results in the fade effect being triggered even if you hover right of the picture (which probably is unwanted).
.profile-image10 .overlay{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 585px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.profile-image10 a:hover + .overlay {
opacity: 1;
}
<div class="profile-image10">
<img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" />
<span class="overlay"></span>
</div>
Fiddle: https://jsfiddle.net/1wusom4m/3/
I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...
The CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Take a look: http://jsfiddle.net/AK3La/
You can transition background-image. Use the CSS below on the img element:
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.
The solution (that I found by myself) is a ninja trick, I can offer you two ways:
first you need to make a "container" for the <img>, it will contain normal and hover states at the same time:
<div class="images-container">
<img src="http://lorempixel.com/400/200/animals/9/">
<img src="http://lorempixel.com/400/200/animals/10/">
</div>
with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)
CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)
Basically, you need to hide "normal" state and show their "hover" when you hover it
and that's it, I hope somebody find it useful.
Unfortunately you can't use transition on background-image, see the w3c list of animatable properties.
You may want to do some tricks with background-position.
I've figured out a solution that worked for me...
If you have a list item (or div) containing only the link, and let's say this is for social links on your page to facebook, twitter, ect. and you're using a sprite image you can do this:
<li id="facebook"></li>
Make the "li"s background your button image
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Then make the link's background image the hover state of the button. Also add the opacity attribute to this and set it to 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Now all you need is "opacity" under "a:hover" and set this to 1.
#facebook a:hover {
opacity:1;
}
Add the opacity transition attributes for each browser to "a" and "a:hover" so the the final css will look something like this:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
If I explained it correctly that should let you have a fading background image button, hope it helps at least!
You can use pseudo element to get the effect you want like I did in that Fiddle.
CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
position: relative;
}
.title a:after {
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{
opacity: 1;
}
HTML:
<div class="title">
HYPERLINK
</div>
If you can use jQuery, you can try BgSwitcher plugin to switch the background-image with effects, it's very easy to use.
For example :
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
And add your own effect, see adding an effect types
Try this, will make the background animated worked on web but hybrid mobile app
not working
#-webkit-keyframes breath {
0% { background-size: 110% auto; }
50% { background-size: 140% auto; }
100% { background-size: 110% auto; }
}
body {
-webkit-animation: breath 15s linear infinite;
background-image: url(images/login.png);
background-size: cover;
}
Considering background-images can't be animated,
I created a little SCSS mixin allowing to transition between 2 different background-images using pseudo selectors before and after. They are at different z-index layers. The one that is ahead starts with opacity 0 and becomes visible with hover.
You can use it the same approach for creating animations with linear-gradients too.
scss
#mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){
position: relative;
z-index: 100;
&:before, &:after {
background-size: cover;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity $transTime;
}
&:before {
z-index: -101;
background-image: url("#{$bkg1}");
}
&:after {
z-index: -100;
opacity: 0;
background-image: url("#{$bkg2}");
}
&:hover {
&:after{
opacity: 1;
}
}
}
Now you can simply use it with
#include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
You can check it out here:
https://jsfiddle.net/pablosgpacheco/01rmg0qL/
If animating opacity is not an option, you can also animate background-size.
For example, I used this CSS to set a backgound-image with a delay.
.before {
background-size: 0;
}
.after {
transition: background 0.1s step-end;
background-image: $path-to-image;
background-size: 20px 20px;
}
Salam, this answer works only in Chrome, cause IE and FF support color transition.
There is no need to make your HTML elements opacity:0, cause some times they contain text, and no need to double your elements!.
The question with link to an example in jsfiddle needed a small change, that is to put an empty image in .title a like background:url(link to an empty image); same as you put it in .title a:hover but make it empty image, and the code will work.
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
.title a:hover{ background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
Check this out https://jsfiddle.net/Tobasi/vv8q9hum/
With Chris's inspiring post here:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
I managed to come up with this:
#banner
{
display:block;
width:100%;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/image1.jpg);
/* HOVER OFF */
#include transition(background-image 0.5s ease-in-out);
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
#include transition(background-image 0.5s ease-in-out);
}
}
This can be achieved with greater cross-browser support than the accepted answer by using pseudo-elements as exemplified by this answer: https://stackoverflow.com/a/19818268/2602816
I was struggling with this for a bit, I first used a stack of images on top of each other and every three seconds, I was trying to animate to the next image in the stack and throwing the current image to the bottom of the stack. At the same time I was using animations as shown above. I couldn't get it to work for the life of me.
You can use this library which allows for **dynamically-resized, slideshow-capable background image ** using jquery-backstretch.
https://github.com/jquery-backstretch/jquery-backstretch
I'm attempting to create a small animation on an image (the image grows slightly) when a link is hovered over using only CSS3 animations.
The relevant snippets from my code
HTML:
<img id="enterimg" src="img.png" alt="" />
<a id="enterbutton" href="home.php">Enter</a>
CSS:
#enterimg {
width: 350px;
height: 350px;
-webkit-transition: width 1s ease-out, height 1s ease-out;
-moz-transition: width 1s ease-out, height 1s ease-out;
-o-transition: width 1s ease-out, height 1s ease-out;
transition: width 1s ease-out, height 1s ease-out;
}
a:hover ~ #enterimg{width:400px;height:400px;}
I'm sure the transitions themselves are correct, but none of the different "calls" (the last line of CSS) I've tried have worked.
(This is similar to a number of other questions, but I've looked through them and as far as I can tell none of them answer my question)
Thanks to Lokesh Suthar.
The order of the sibling selector required I placed the link first in the markup. Since the selection was written:
a:hover ~ #enterimg{width:400px;height:400px;}
The markup needed to be in that order
<a id="enterbutton" href="home.php">Enter</a>
<img id="enterimg" src="img.png" alt="" />
If you wrap the content in the trigger, then position the content absolutely, you can achieve something similar to triggering a sibbling with CSS. At least it'll look and act that way.
HTML
<a href="">Click Me
<img id="enterimg" src="http://www.druglessdrs.com/wp-content/uploads/2012/07/google-logo-small.jpg" alt="" />
</a>
CSS
a img {
display:block;
position:absolute;
top:80px;
left:0;
border:solid 1px black;
-webkit-transition: width 1s ease-out, height 1s ease-out;
-moz-transition: width 1s ease-out, height 1s ease-out;
-o-transition: width 1s ease-out, height 1s ease-out;
transition: width 1s ease-out, height 1s ease-out;
}
a:hover img {
left:50px;
}
Fiddle
I have the following code of CSS3 for regular browsers and those with -webkit- suport.
But, what value should I really set for the following property:
-webkit-transition-property: ????;
Because a value like box-shadow is -webkit-box-shadow for -webkit- related usages, and then, for the above property, should I use box-shadow or -webkit-box-shadow?
If you want to have a transition of a property which also uses vendor prefixes itself, you need to add them.
Example CSS:
.my-class {
-webkit-transition: -webkit-box-shadow 1s;
-moz-transition: -moz-box-shadow 1s;
-ms-transition: -ms-box-shadow 1s;
-o-transition: -o-box-shadow 1s;
transition: box-shadow 1s;
}
With unprefixed properties it works like this:
.other-class {
-webkit-transition: color 1s;
-moz-transition: color 1s;
-ms-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
}
Browser support:
CSS3 transition
CSS3 box-shadow
You should use the corresponding vendor-prefixed property.
-webkit-transition-property: -webkit-box-shadow;
-moz-transition-property: -moz-box-shadow; /*For older versions of Firefox only*/
transition-property: box-shadow;
Check this example:
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
is the same as (using shorthand version):
div {
transition: width 1s linear 2s;
-webkit-transition: width 1s linear 2s; /* Safari */
}
Here http://caniuse.com/#feat=css-transitions you can find when you need prefixes for transitions. There is a nice example here http://jsfiddle.net/davidThomas/XEWhk/1/ from another similar question that helps a lot.
I use CSS for div tag in html. This is show below.
.sqmenu{ width:120px;
display:inline-block;
height:80px;
border-radius:10px;
margin:15px 0 0px 45px;
box-shadow:#333 2px 2px 20px;
-webkit-transform:scale(1);
transform:scale(1);
color:#093;
-webkit-transition: ease-in-out 0.6s;
-moz-transition: ease-in-out 0.6s;
-o-transition: ease-in-out 0.6s;
-ms-transition: ease-in-out 0.6s;
transition: ease-in-out 0.6s;}
.sqmenu:hover{-webkit-transform:scale(1.2);
transform:scale(1.2);
color:#F63;
-webkit-transition: ease-in-out 0.6s;
-moz-transition: ease-in-out 0.6s;
-o-transition: ease-in-out 0.6s;
-ms-transition: ease-in-out 0.6s;
transition: ease-in-out 0.6s;
}
This two class use for this line:
<div class="nev_menu">
<div class="sqmenu" style="background-color:#aa68aa;">
<div style="text-align:center; margin-top:10px;"><img src="images/Activities60.png" class="linkimg" /></div>
<div style="text-align:center;font-family:Verdana, Geneva, sans-serif;
font-size:16px; margin-top:30px;text-decoration:none;">Our Delight</div>
</div>
</div>
This div is perfectly runnig in Chrome and FF & IE10 but Not running in IE8. Problem is hover and box-shadow effect not apply.
There are several css properties that are not supported in ie8, including the box-shadow. The hover property for ie only works if the link has an associated href. One option that I have used in the past to help with ie8 compatibility with newer css3, is PIE - http://css3pie.com/. It's fairly easy to implement and allows you to use the newer css3 properties like box-shadow.
CSS3 Transitions are not supported prior to IE10.
for ie9 u forget : -ms-
transform:scale(1.2);
-ms-transform:scale(1.2);
But ie9 don't support "transition". For ie older version u need to use filter for transform property. Look this link :
link