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.
Related
I set the background image on a div and I set the javascript mouseover event to change the background image. When I mouseover, it changes to the other image but it appears to flicker the first time it is loaded and displayed in the browser. After that the image changes normally (without a flicker).
You need to preload the image in order to avoid the flicker. Using CSS one could do:
body::after {
content: url(preload-me-1.jpg) url(preload-me-2.jpg);
display: none;
}
But maybe you actually need image sprites to change background on mouse over, that way you need no preloading.
I have problem with changeing bootstrap 3 background image, as a background of .container i use image, id like to set some other image as background image so it will fill empty space's on sides.
Can i kindly ask for some help ?
Link to site
Attach the image to the body element instead of an element with the class container using css.
body {
background: url('x');
}
x can equal an absolute image path or a relative path.
this can also be implemented using inline styling directly on the body element in your html
<body style="background:url('x')">
I need the ability for all images, placed in a post, to be wrapped in a div so I can add custom styling to the image. (I need a image border on each image.)
How can I get get it so that it automatically adds a div around each image in the post content?
Thanks
Instead of surrounding each image with a div, why don't you just apply a class to each <img> tag?
So, you could add, in your CSS file:
img .border
{
/* your border code here */
}
And for every image in your HTML, just add class="border".
I would also recommend looking into some CSS3 - border-image may offer the solution: http://css-tricks.com/understanding-border-image/
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/
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.