I am currently trying to adjust the CSS Animation I have testing on https://www.alexcurriemedia.com/css-test/
What I need to happen is for the first image to not be on screen when the page opens, and for the last image to disappear completely off screen
Here is the html code:
<table><td><h1 class="animated slideInLeft">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="500" width="500"/>
</h1></td>
<td><h1 class="animated slideOutRight">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="100" width="500"/>
</h1></td></table>
And this link is the stylesheet for the movements:
So on load you want the image on the right to start sliding off the page, and the image on the left to start sliding in?
Your images are staying visible after they slide over because, by default, content that overflow's it's parent stays visible. Try adding overflow: hidden to .content-wrapper.
Otherwise I've misunderstood the question.
The problem is in your js fiddle, you cannot transition visibilty in keyframes, it is either visible or not visible, so theres no mid-points to 'transition' you can how-ever transition opacity or use javascript to toggle display:block; to display:none; or combine the two methods to fade out its visiblity and then remove it from the dom using js.
Also your keyframe statements should both match:
ie from: should have all the same properties & values
as 'to'.
examples:
#keyframes name{
from{filter:opacity(0) hue-rotate(0deg);}
to{filter:opacity(1) hue-rotate(288deg);}
}
#keyframes sumName{
0%{filter:opacity(0) hue-rotate(0deg);} // Note even though hue-rotate is at 0deg, it will not run if they do not match
50%{filter:opacity(0.5) hue-rotate(288deg);}
100%{filter:opacity(1) hue-rotate(24degdeg);}
}
Also:
These`should be above the keyframe declarations, symantically speaking.
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
hope some of these help.
Related
http://codepen.io/tylerkung/pen/Bukzy
I've implemented the self-correcting grid, so that when you resize the browser window, the 3 images will simply stack on top of each other.
I've also been able to make the images fade on mouseover.
But the last bit I wanted to add was to display a text on mouseover which seems tricky to me.
I'm just learning CSS so any help/articles/advice would be appreciated!
You want to change the opacity of the text when the container link is hovered so use this:
.wrapper:hover .text{
opacity: 1;
}
instead of
.text:hover{
opacity: 1;
}
See updated codepen
If you're looking for a simple tooltip, you may just add title attribute on each of the image.
I have a couple of divs, one inside the other, I'm using border-radius and overflow: hidden on the outer div which creates a circular mask over the inner div.
It works, however, when using backface-visibility: hidden; on the child div the border-radius is no longer applied.
Here's an example of the issue, can be seen in chrome and safari
Looks like this is a bug in webkit it's being tracked on the chromium issue track. Looks like no sign of a fix being merged any time soon.
Ok, i've tried a few things with your example. The W3schools states that "backface-visibility:hidden;" is not yet well supported. This property has to do with 3d transformations, right? Specially rotation.
I found a workaround. Apply the "backface-visibility" on the mask div, not the inner one. If you do that, you'll see that it breaks the round as well. But if you apply a rotation transform on the mask div, the rounded border appears back to normal.
So, if you really want to hide the backface without losing the radius, apply this style only after you started rotating the element. Check this out:
<p>Backface hidden:</p>
<div class="ex">
<div class="mask bfh">
<div class="bg"></div>
</div>
</div>
And the css:
.bfh {
-webkit-backface-visibility:hidden;
-webkit-transform: rotateY(30deg);
}
In #Rob linked track on chrome issue there is also a workaround that was added by user viktorli.
Simply add a transform rule on the parent element of the rogue child not respecting the overflow:hidden rule and it will be fixed! something like:
-webkit-transform: scale(1);
I'm trying to design an interaction that uses an SVG canvas (the full app uses d3) and image elements drawn on the canvas. I'd like each image to change somehow when the user hovers or clicks on the image, to show that it is selected. The most basic style change I could think of is changing the outline of the image (i.e. draw a border around it), and this works fine on Chrome 23/Chromium 20. However it does not have any effect on Firefox 16.
jsFiddle: http://jsfiddle.net/RSLsy/
Code:
<!DOCTYPE HTML>
<html>
<body>
<style>
.map {
background-color: blue;
}
.button:hover {
outline: solid medium black;
}
</style>
<div>
<svg width="400" height="300" class="map">
<image class="button" xlink:href="http://www.gstatic.com/ui/v1/button/search-white.png"
x="10" y="10" width="20" height="20"/>
</svg>
</div>
</body>
</html>
Any ideas for how I can achieve this type of effect cross-browser?
Thanks in advance!
If you aren't limited to using png images and could potentially have icon shape images like the magnifying glass as svg paths, you can use JQuery to animate their fill, stroke, etc. Here is a fiddle I made for another SO question regarding animating color change on hover that you might be able to repurpose.
http://jsfiddle.net/webchemist/hBHBn/
in your case you would want to change the JQuery UI Color plugin hook to
jQuery.Color.hook('stroke');
to get an outline effect. That fiddle should work in IE9 and all current versions of Firefox, Opera, Chrome and Safari
Edit
I updated your fiddle to get the same effect in chrome & firefox w css (havent tested other browsers) by wrapping the image element in a group with an empty rectangle the same size and location of the image. Not sure why it wont make the group element the size of the image element without the rect element holding it open.. Adding duplicate empty rectangles for each of your image elements is probably not ideal but might be easier than making svg paths for my original fiddle solution
http://jsfiddle.net/RSLsy/2/
Here's what I would like to do:
It's a quiz, there's a question and several answers.
The user picks 1 answer and is then shown what the correct answer is.
I would like that the correct answer button "lights up" basically, and then fades back to normal.
So I can give my element a simple style and then add a class with a white box shadow.
And I can transition between the two.
But I'd like to add the class, and then the element gets the full white box shadow, which then fades back to the normal state.
Is that possible?
You need to use #keyframes to do it in pure CSS3
#keyframes animation_name{
0% {background: color1;}
50% {background: color2;}
100% {background: color1;}
}
and for the element where you want the animation
css_selector{
animation: animation_name 5s;
animation-iteration-count:infinite;
}
and dont forget to add browser specific -moz, -webkit prefix.
Check out this Example on w3schools on CSS3 Animation
javascript apply class to element (no jquery):
document.getElementById("id").className = "newclass";
Here is a jsfiddle for you. Should do what you need - just click the black rectangle.
Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.