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.
Related
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.
I'm learning about CSS3 transitions and struggling with the vendor prefixes. This is just for fun but I'd like to know why the circle expands on hover in Firefox as it's meant to but shrinks in Safari and Chrome. Webkit seems to be ignoring the width and height but border and opacity are fine. The animation in the normal state seems fine too.
I tried changing the .disc:hover width, and tried changing the transition to width instead of all (which seems to work).. it's just all that seems to not be working.
A link to the page:
http://ambigraph.com/sketchbook/expando/
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Expando</title>
<link href="expando.css" rel="stylesheet" type="text/css">
</head>
<body ontouchstart="">
<div class="disc">
</div>
</body>
</html>
The CSS:
#keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
#-webkit-keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
body {
margin: 0 auto;
}
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
It looks like it may be an animation bug since the expando animation is still applied to the element even while hovered. Each browser deals with it differently.
Clearing the animation seems to fix it.
CSS
.disc:hover {
/* ... */
-webkit-animation:none;
animation:none;
}
Firstly you have to differentiate between transition and animation.
The keyframe animation defines the activity that is going on regardless of your input (hover or whatever).
The transition defines what happens when you do something.
To examine the differences between the two states to see what is being transitioned. Remove the duplicates.
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
Essentially, the hover makes the element transparent while increasing the size and changing the border. Since it's transparent, the border really doesn't matter.
I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:
<div class="textbox">
<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>
</div>
And also
div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}
div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}
p.boxtext {
margin: 5% 5%;
}
This creates the hover that I want, but I can't keep the text opacity at 100%.
Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?
Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.
a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
a#imglink1:hover p {
visibility: visible;
}
Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:
div.textbox:hover {
background-color: rgba(222,222,222,.5);
border: 2px solid rgba(222,222,222,.5);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
For images you can accomplish a fade using :before and :after and fading the opacity of those elements:
a#imglink2 {
width: 200px;
height: 200px;
float: left;
position: relative;
}
a#imglink2 p
{
position: relative;
z-index:2;
}
a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:1;
transition: .3s opacity linear;
}
a#imglink2:after
{
background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:0;
transition: .3s opacity linear;
}
a#imglink2:hover:before
{
opacity:0;
}
a#imglink2:hover:after
{
opacity:1;
}
http://codepen.io/seraphzz/pen/ikJqB
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;
}
So I've these CSS3 script
#place.us .level1 { background-position: -100px; background-color: #333; }
#place.gb .level1 { background-position: -100px; background-color: #CCC; }
#-webkit-keyframes place-pop-livel1 {
0% { bottom: -100px; }
100% { bottom: 30px; }
}
#place .level1 {
animation: place-pop-livel1 2s ease-out;
-moz-animation: place-pop-livel1 2s ease-out;
-webkit-animation: place-pop-livel1 2s ease-out;
}
When the page first loads, the div has #place.us and the animation works perfectly. Now I want to change the class of the div to 'gb' to make it #place.gb using jquery and as soon as the class is changed, I want the same animation to happen.
My jquery code is simple
$('.change-city').live('click', function(){
var city = $(this).data('city'); //gb or us
$('#place').removeClass().addClass(city);
});
The class changes and the .level1 property is affected as declared in the CSS but the animation doesn't happen. How do I make sure that the animation happens?
I'd recommend using CSS transitions as they have better browser coverage, they are simpler to manage and they fallback better (if the browser doesn't support transitions it does the same thing without the animation).
You problem can be solved like this:
// after load add the animation
$(".level1").addClass("pop");
// after the animation is done hide it again
$(".level1").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){
$(this).removeClass("pop");
});
$('.change-city').live('click', function(){
var city = $(this).data('city'); //gb or us
$('#place').removeClass().addClass(city).find(".level1").addClass("pop");
});
And the CSS
#place.us .level1 {background-color: #333; }
#place.gb .level1 {background-color: #CCC; }
#place .level1 {
position: absolute;
background-color: #000;
width: 100px;
height: 100px;
bottom: -100px;
-webkit-transition: bottom 2s ease;
-moz-transition: bottom 2s ease;
-o-transition: bottom 2s ease;
-ms-transition: bottom 2s ease;
transition: bottom 2s ease;
}
#place .pop {
bottom: 30px
}
You can check out the jsfiddle here: http://jsfiddle.net/EmsXF/