This is the background image:
#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}
<div id="logo"><span>logo</span></div>
This code gives me a slide effect (a vertical slide from the black S to the pink one) instead of the fade effect I'm looking for. Creating two images, would solve the issue, but that is not possible in this case.
How do I get the fade affect when using only one single image?
Try this - http://jsfiddle.net/Wds5z/4/
a, #logo {
background: url('http://i.stack.imgur.com/w5ZnN.png') 0 -23px;
width: 20px;
height: 23px;
display: block;
}
#logo {
background-position: 0 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#logo:hover {
opacity: 0;
}
#logo span {
margin-left:-3000px;
}
Related
CSS newbie here.
I have this image and I want to reveal it from right to left, what do I have to add/change to this code?
.arr1 {
display:block;
position:absolute;
left:1001px;
top:920px;
width:0;
height:99px;
background:url(../img/arr1.png) no-repeat;
background-size:254px 99px;
opacity: 0;
transition: 0.5s linear;
pointer-events: none;
&:hover{
opacity: 1;
pointer-events: all;
width: 254px;
transition-delay: 1s;
}
}
A bit difficult to give a reliable answer without more code, but from what you posted, change the absolute position of the container to right instead of left and add the width of the image to the former left value, resulting in 1255px:
.arr1 {
display:block;
position:absolute;
right:1255px;
top:920px;
width:0;
height:99px;
background:url(../img/arr1.png) no-repeat;
background-size:254px 99px;
opacity: 0;
transition: 0.5s linear;
pointer-events: none;
&:hover{
opacity: 1;
pointer-events: all;
width: 254px;
transition-delay: 1s;
}
}
You might also want to add background-position: right to .arr1, depending how you want the image to be revealed.
I have the following class:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
}
I modified the class like this:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
What I tried to do was to apply a transition so that the div is not initially shown when the page is opened but it reaches opacity: 1; after 1s has passed.
I did some research and all I could find on SO and Google was related to hovering. I tried applying "opacity: 0;" to my class but then the transition wouldn't take place, the div would just stay hidden.
Is there any way to accomplish an opacity transition without a hover state using CSS?
You can accomplish this with CSS3 animation:
.dot{
width:40px;
height:40px;
position:absolute;
background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size:100% 100%;
z-index:999;
pointer-events:none;
animation:fadeIn 1s ease-in;
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
<div class="dot"></div>
You can achieve this using css animations.
The animation is set using the #keyframes rule. To illustrate in the example, I removed the margin top; this is not a necessary change in your code.
.dot {
width: 40px;
height: 40px;
position: absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index: 999;
// margin-top:-60%;
pointer-events: none;
animation: fadein 1s ease-in;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="dot"></div>
Yes, use JavaScript to trigger the transition. That is the answer to your question. A transition only happens when there is something to transition to. Just sepcifying a transition on an element does not trigger the transition. Change does. When the element first loads there is nothing to transition to.
So i'm doing a transition effect on an <a> that has no default background image so when I try to hover over it the transition effect doesn't work. I doubt that without having a default background image it'll not work. So how can I achieve my goal or any alternative on doing that without using javascript? Here is my code:
<nav>
<li>Products</li>
</na>
Here is my css:
.nav>li>a { font-size:17px; color:#929799; padding:45px 25px 35px 25px;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
.nav>li>a:hover, .nav>li>a:focus{
background:url(http://cdn.myld.com.au/2/1198/web_total-gardens_9a0e4cf244.png) no-repeat top center; color:#38c867; }
background-image is a non-animatable property. You can not apply transitions.
I'm assuming you want to fade in the image on hover (?). A way to fake it is to apply your background image to a pseudo element and transition the opacity:
body {
padding-top: 50px;
}
nav>ul>li>a {
font-size: 17px;
color: #929799;
padding: 45px 25px 35px 25px;
position: relative;
}
nav>ul>li>a>span {
position: relative;
}
nav>ul>li>a:before {
content: "";
background: url(http://placehold.it/200x100) no-repeat top center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
nav>ul>li>a:hover:before,
nav>ul>li>a:focus:before {
opacity: 1;
}
<nav>
<ul>
<li><span>Products</span></li>
</ul>
</nav>
As #GabyakaG.Petrioli mentioned in the comments, your selectors are wrong and you have invalid HTML. Both are fixed in the above example
css transition opacity allow image to change values over a specified duration, animating the property changes
http://css3.bradshawenterprises.com/cfimg/
or try
transition: all 1s ease-in-out;
I have the following code in css:
.item {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
}
.item.seen {
opacity: 1;
}
when I add the class seen to an .item, the opacity of the item turn from 0 to 1 with transition.
but when I remove the class seen from an .item the opacity transition (from 1 to 0) also runs.
is there any way to make the transition run when .seen is added but not when it is removed?
.item {
opacity: 0;
}
.item.seen {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
fiddle: http://jsfiddle.net/qcxt3evn/ (with opacity set to 0.2 just for the purpose of seeing the clickable element)
Also, don't forget to place the standard property after the vendor-prefixed (the latter might be non-compliant to the specification)
In this case, the class which contains the transition never change.
If you setup your transition in the class which toggle, the transition won't be effective on the remove.
.item {
opacity: 0;
}
.item.seen {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
DEMO
To go beyond, as also well explained in the article Ordering CSS3 Properties from Chris Coyier, you should be careful about the order of you prefixes, with the very good example attached to the article:
http://codepen.io/css-tricks/pen/pqgKH
#wrongway { background: #ccc; padding: 30px;
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
#rightway { background: #ccc; padding: 30px;
-webkit-border-radius: 30px 10px;
border-radius: 30px 10px;
}
I am doing a transition where it fades into transparent white, when a user is hovering an image.
My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.
The css code I am using is:
.hover:hover {
opacity: 0.2;
}
.item-fade {
background: black;
opacity: 0.8;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />
Wrap your image with a span element with a black background.
.img-wrapper {
display: inline-block;
background: #000;
}
.item-fade {
vertical-align: top;
transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover {
opacity: 0.2;
}
<span class="img-wrapper">
<img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>
It's not fading to "black transparent" or "white transparent". It's just showing whatever color is "behind" the image, which is not the image's background color - that color is completely hidden by the image.
If you want to fade to black(ish), you'll need a black container around the image. Something like:
.ctr {
margin: 0;
padding: 0;
background-color: black;
display: inline-block;
}
and
<div class="ctr"><img ... /></div>
http://jsfiddle.net/6xJQq/13/
.container {
display: inline-block;
padding: 5px; /*included padding to see background when img apacity is 100%*/
background-color: black;
opacity: 1;
}
.container:hover {
background-color: red;
}
img {
opacity: 1;
}
img:hover {
opacity: 0.7;
}
.transition {
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
Please note that the problem is not white color. It is because it is being transparent.
When an element is made transparent, all of its child element's opacity; alpha filter in IE 6 7 etc, is changed to the new value.
So you cannot say that it is white!
You can place an element above it, and change that element's transparency to 1 while changing the image's transparency to .2 or what so ever you want to.