Hover opacity CSS Minimum image size - css

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.

Related

iron-overlay-backdrop style not being applied

I have a custom element which has an iron-overlay-backdrop as a child element (inside a paper-dialog). I am trying to increase the fade time (which I can do if I can edit the css in chrome). When I try and apply changes to the style --iron-overlay-backdrop the changes are not being applied in the child. What I have is:
<style>
:host {
--iron-overlay-backdrop: {transition: opacity 5s;};
}
</style>
I have also tried something simpler with --iron-overlay-backdrop-opacity: 0.8 which does not work either. For some reason the style is not being applied. Does anyone know what I am doing wrong, or how I can get the desired behavior of a longer transition time?
The custom property for the overlay backdrop is : --iron-overlay-backdrop-opacity
you can set the opacity of the host and it's transition this way
:host{
opacity: var(--iron-overlay-backdrop-opacity, 0.8);
transition: opacity 5s;
}

Is it possible to smoothly hide html element and remove it using css attribute selector and property display:none?

I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO

How to fade in image when in view with CSS

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

Why does nth-child prevent a:hover style working?

I have a simple list of images, styled to look like polaroid images.
Each image is rotated.
a.polaroid {
transform: rotate(-2deg);
}
A scale transform is used on hover.
a.polaroid:hover {
transform: scale(1.15);
}
All is well at this point.
However, some additional styling is added to alter the default rotation for certain images.
I.e. all even images, every 3rd image etc.
/* Rotate all even images 2 degrees */
li:nth-child(even) a.polaroid {
transform: rotate(1deg);
}
/* Cancel rotation for every 3rd image */
li:nth-child(3n) a.polaroid {
transform: none;
}
For some reason, adding these styles prevents the hover style applying for any image that is targeted by these styles. I.e. every even image and every 3rd image.
Any idea why???
Please see associated fiddle http://jsfiddle.net/46sdd/
Updated fiddle with solution is here: http://jsfiddle.net/46sdd/3/
Selector specificity (see also, MDN) - your a.polaroid:hover is not specific enough to override li:nth-child(3n) a.polaroid. The solution is to add the necessary specifics to former, so they match, and move the :hover selector below :nth-child ones:
li:nth-child(3n) a.polaroid
li a.polaroid:hover

Can I change the opacity of the navbar in twitter bootstrap?

I stumbled onto this site: and started thinking. Is this possible using twitter's bootstrap? I don't see an opacity setting in the css file? Is it as easy as adding it.
In general, this is possible. Testflightapp uses the background-color: rgba attribute with an opacity level.
So if you want to set a background color with opacity to on of you element use this CSS:
elementname {
background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}
If you want to set the opacity on the element as a whole use:
elementname {
opacity: 0.5; /* opacity [0-1] */
-moz-opacity: 0.5; /* opacity [0-1] */
-webkit-opacity: 0.5; /* opacity [0-1] */
}
This is only supported by browsers that support CSS3.
A late answer, but I just found this question whilst looking up something very similar.
If you're using bootstrap with less, so that you're building the css yourself as part of an asset pipeline you should set opacity using the utility macro.
selector {
.opacity(50); /* opacity [0->100] */
}
It'll define the correct browser prefixes, including the IE filter syntax for you.
If you are using bootstrap with sass. You can use the opacity mixin.
#include opacity([from 0-100]);
This will take handle all browser compatibilities (if supported) dealing with opacity.

Resources