I need a little help with CSS animations. How can I make this http://jsfiddle.net/nmsdvid/TdnVs/ just with CSS. So, when I hover over the krab div a css animation will start and going to switch images (vws02.png than vws01.png than vws02.png) while I'm on hover.
The example of krab you have given is done with the css only. On image hover they have just changed the image form http://nmsdvid.com/images/vws01.png to http://nmsdvid.com/images/gif.gif. If you see the second image is already a .gif image(animated image).
here you check
#krab {
width:335px;
height:345px;
background-image:url(https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
}
#krab:hover {
background-image:url(https://image.winudf.com/v2/image/Y29tLnp6d3BuZXcudGlnZXIzRF9zY3JlZW5zaG90c18wX2NhZWNhNzYz/screen-0.jpg?h=355&fakeurl=1&type=.jpg);
}
demo: http://jsfiddle.net/TdnVs/4/
Related
I have an overlay which should be on top of everything. The problem is that the overlay is inside a content-wrapper that has a z-index defined. This can't be changed. The logo has a z-index defined as well. This too, can't be changed.
I've made a Fiddle which shows the issue. Can this be done with pure CSS? My other idea is to move the overlay with Javascript, but all the CSS is currently also nested, so I need to change lots of CSS if I do so.
Do something like this, when you click on 'btn' toggle some class to '.overlay', like this\
$("button").on("click", function() {
$(".overlay").toggle();
$('.content').toggleClass('z-1000');
});
in your CSS:
.content.z-1000{
z-index:1000;
}
hope this works for you. working fiddle
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.
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.
Is there a way using CSS to make a container like:
#p-container .p-categories-item
affect the images within that div? I have a CSS animation on the images, but I would like it to play when I hover over the entire element, not just actual image itself. Thanks.
Just use #p-container .p-categories-item:hover img { /* stuff */ } to select the image inside the .p-categories-item element only when it's being hovered over.
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.