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
There are couple of similar questions around. But here's a little change in the case.
I am using CSS3 transition to show a small div in the bottom of the page. When I set the class .show, it slides up and when I remove it, it slides down and goes out of the page.
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
}
.bar.show {
opacity: 0.85;
bottom: 0;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
My problem is, though it goes away, it still is a display:block element. Which causes my body have scroll. Is there any way by which I can set display:none (using CSS only) after transition? Or some how convince body not to have scroll? (I already have overflow: hidden).
Since transition-delay don't work on display property. I tried visibility, but still the browser keeps some space for scroll.
Update:
Just incase we don't find any good solution, I've done it this way for now instead of display: none.
.bar {
transition: max-height 0s linear 0.3s, bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
max-height: 0;
overflow: hidden;
border-top-width: 0;
padding: 0;
}
.bar.show {
opacity: 0.85;
bottom: 0;
max-height: 50px;
padding: 5px;
border-top-width: 1px;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
Here's something that could be useful, I've essentially implemented this via position:fixed, check this fiddle to see if it's something that meets your requirements - http://jsfiddle.net/7x0oajv2/
Second approach could be using position:absolute with a overflow:hidden on the body like so - http://jsfiddle.net/7x0oajv2/1/
I would try to set the margin as following:
height of the division = x
margin-bottom: -x;
Not sure if this works but I think it should. Otherwise you might use
position: fixed;
Or the third possible solution would be to not let the division slide out at the bottom but on the left side. This can be done like this:
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
left: -100px;
}
If you want to change CSS dynamically you must use JavaScript or jQuery to change DIVs property.
E.g
$.("#myDiv").removeClass('displayBLOCK');
$.("#myDiv").addClass('displayNONE');
CSS:
.displayNONE{
display: none;
}
.displayBLOCK{
display: block;
}
If you just want to remove the div, call $.('#myDiv').hide(). You don't need to set display property to "none".
I am trying to create a nav menu like the one here(http://themes.fuelthemes.net/bouncy/) for practice, and I have come pretty close but mine doesn't quite look (the animation isn't as smooth) as good as the one in the example. The source code is very large and I cannot find how the author creates the animations in the css code or through javascript. Here is what I have so far. Could someone please take a look and tell me what I am doing wrong?
The method I am using to make the menu slide down is by using the max-height property and I am making it fade in with the opacity property.
Bulk of animation code:
.menu > li:hover > ul {
display: block;
-webkit-transition: max-height 0.2s, opacity 0.2s;
-moz-transition: max-height 0.2s, opacity 0.2s;
-ms-transition: max-height 0.2s, opacity 0.2s;
-o-transition: max-height 0.2s, opacity 0.2s;
transition: max-height 0.2s, opacity 0.4s;
max-height: 500px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.dropdown {
max-height: 0;
position: absolute;
list-style: none;
background: #2c2c2c;
margin: 0;
padding: 0;
overflow: hidden;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
My JSFiddle:
http://jsfiddle.net/cn2fZ/
They aren't using Transistions what the code is is something like this
http://jsbin.com/onituc/1/
or
this http://jsbin.com/onituc/2/edit
Both are different styles
The first one uses the mouseenter and mouseleave functions combined with the delay function. As well as using the fadeIn, we can change the fadeIn to other stuff like
show
slideDown
The second one just uses the slideUp and slideDown functions combined as well with the mouseenter mouseleave
Hope one of these two help you, if you need more help please comment
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).