Is there a way to fade in an image when a user scrolls the image into view using purely if not mostly CSS?
I have a bunch of images displayed and I'd like the images to appear as they scroll down as a nice effect.
If you want the image to fade in only when the user can see it (after scrolling the page), you can't do it with CSS only. To make the fade in/fade out effect on hover use opacity and transition. Example
img{
opacity: 0.6;
transition: all 1s;
}
img:hover{
opacity: 1.0;
}
If you want to use JQuery, it's possible. See this exmaple.
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
The CSS3 property for transparency is opacity.The opacity property can take a value from 0.0 - 1.0\
A lower value makes the element more transparent.
img:hover {
-webkit-filter: grayscale(100%);
}
Check this link, it would be of great help for you:-
http://designshack.net/?p=36895
Related
I have a button that changes opacity with :hover, but inside there's an image that shouldn't be affected by the button's opacity change.
For example, something like this:
.expandIMG:hover{
opacity: 0.6;
}
.expandIMG:hover,div,img{
opacity: 1; // this make no opacity but for all the button an i just want
// the image that are inside of some div.
}
I think you're trying to change the opacity of the div containing the image to 0.6 while keeping the image's opacity at 1.
You can accomplish this using background: rgba(0,0,0,1) instead of opacity:
.expandIMG {
background: rgba(0,0,0,1);
}
.expandIMG:hover{
background: rgba(0,0,0,0.6);
}
This way, you're only changing the alpha (opacity) of the div's background while the images inside it aren't affected.
Example: http://jsfiddle.net/2krc5080/
You could also try to set the z-index of the image higher while hovering. And maybe this answer is also useful to you.
.expandIMG:hover img {
z-index: 9999; // more than the expandIMG
}
Come on please give me more downvotes!! Feed me!!
I'm trying to get a css background color to fade out right after the page loads without any user interaction. Can this be done?
This can be done using CSS animations. There is a property animation-delay which can be set in seconds.
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
Here is a simple example of a background fading after 2 seconds: http://jsfiddle.net/eKAf2/
Personally I'd have the background set in CSS. Then modify the document with jQuery. So I'd set the background color
CSS
body {
background: #009dff;
}
Then set the background color that the page fades into, and add the transition
JS
$(document).ready(function() {
$("body").css("transition", "3s"); // Adding transition
$("body").css("background", "#fff"); //Background color to fade into
});
Plus here's a demo.
With pure JS you can use onload on the body and set up a function, then call it that way.
If you had an element eg: .elem
<div class="elem"></div>
Styles:
.elem {
width: 100px;
height: 100px;
background: red;
}
You could have a css class eh .nobackground that set the background to transparent with a transition.
.nobackground {
background: transparent !important;
transition: all 1s;
}
You could then apply this class to the element on page load with jquery.
$(document).ready(function(){
$(".elem").addClass("nobackground");
});
Heres a bin. Hope this helps.
I am using the below CSS to create a hover opacity for images. I'd like to be able to set a minimum allowance so only images of a certain size take on the opacity.
Ex. My 225x225 images are correctly taking on the opacity, but so is my large header image. I only want images 225x225 and below to take on opacity when hovered over, not all.
img {
opacity: 1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img:hover {
opacity: .8;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
Thanks for any help!
You can't use media queries on a single element, so you are left to use JavaScript here. There are new CSS rules in the making for this, but it's not reliable to use them at this point.
What you could do is add a listener the img tags with jQuery and review the CSS on page-load. If the image's size does not meet your requirements towards the opacity level, you could cap it.
As Allendar pointed out in his answer; use JavaScript for this, however if JavaScript isn't an option then you'll have to make a class and add that CSS class to each element you want to have the opacity effect on hover.
I am using an image in background of my web page. Now when i uses a table in frontend, i want it to have some transparency effect. ?
How can i do that.
.semiTransparent
{
filter: alpha(opacity = 50);
opacity: .5;
}
this code is not working in CSS file
50% opacity IE:
filter: alpha(opacity = 50);
50% opacity other browsers:
opacity: .5;
The problem with transparency settings in CSS, is that content/text is also semi-transparent, which makes for difficult reading.
A good "cheat" is to use a semi-transparent PNG as a background image for the div/cell. See http://blog.twipler.com for an example and an image from http://blog.twipler.com/twipler/siteimages/white-alpha-thick.png
Can I control the visibility of some div in my website and make to become see-through using CSS only? In flash it's done through controlling what is called Alfa so I'm wondering if such a thing exist in CSS!
Edition 001
Can I control the opacity of the div's background only? So the text in the div wouldn't be effected?
You can use opacity in CSS
.transparent_class {
opacity: 0.5;
}
I think there are some problems with opacity in Internet Explorer so here is example how to change transparency in IE:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
HTH
http://www.quirksmode.org/css/opacity.html
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
Another way to make only the background transparent is by using a transparent png as background-image, and then use this jQuery fix for the special snowflake IE. This works in all browsers as far as I know.
Here is a good link talking about CSS navigation menue I hope it would be helpful:
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml