I have a page with popup displayed onload. The whole site is in greyscale but I want to popup div to be in non-greyscale. I have tried with filter: none or -webkit-filter: grayscale(0); but it is not working that the whole page is in greyscale. Does anyone have any idea on it? Thanks!
-webkit-filter: grayscale(0) !important;
filter: grayscale(0) !important;
My code: Jsfiddle
-webkit-filter isn't a property that cascades down and can be overwritten, it's applied on top of the whole element and its children. If you put a filter on the children, it stacks on top of the parent's filter.
Instead, you'll need to put the filter on an element that is the parent of all the things you want grayed out.
div {
height: 20px;
position: relative;
}
<div>
<div style="-webkit-filter: grayscale(1)">
<div style="background: red">Sample</div>
<div style="background: blue">Sample</div>
</div>
<div style="background: green; position: absolute; top: 10px;">Sample</div>
</div>
Related
I've been testing my portfolio website (http://www.meades.org/Hazel-Portfolio/) on different browsers. The website landing page is designed for an image-specific caption to fade in and obscure the original image whenever the mouse hovers over the image. It seems to work on every browser I've tested so far except for Microsoft Edge. For some reason the blue caption block gets cut off at the bottom and inserted on top of the next image and I can't figure out why.
Here's the CSS I've applied to the images to get the effect:
.index-caption {
background-color: #75bff0;
color: black;
font-size: 16px;
padding-top: 25%;
opacity: 0;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
text-align: center;
display: inline-block;
}
.index-caption:hover {
opacity: 1;
}
And here's an example of that class style being applied to the html (I'm using the Bootstrap .card-columns class to group the images):
<div class="card">
<a href="EMP.html">
<img size="100%" height="100%" class="card-img-top" src="images/emp.png" alt="Ethnomusicology Major Project">
<div class="index-caption">
<h2>The Ideology of the Modern Concert Hall</h2>
<br>
<h4>Last updated: 5/10/19</h4>
</div>
</a>
</div>
I've done some trial and error CSS editing and think the issue might be to do with how the transform and/or display values operate in Microsoft Edge, but I'm not sure and am pretty far out of my coding depth at this point. Does anyone know why it's not working and/or have any advice on how to fix it?
I believe you have hit this bug -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210
Just add overflow: hidden; to .card-columns .card to work around this.
Also, there is no need for the transform as you have width and height at 100%. You could just have:
top: 0;
left: 0;
and no transform.
Hey guys i'm having an issue with my div and image (image is on the same div) the problem is that the top of the div where my header (h1) is and the image on the div respond independently.
I want everything to happen regardless of where I hover on the div but at the moment if i hover on the header the image doesn't change and vice versa. So I was wondering how to make both my Div and image activate their "hover" instructions when either is hovered on.
currently the image is getting the shadow from the div hover (but still only when the image is hovered on) so i just want this and the image to get darker even if the header is hovered on.
not really sure what code would be helpful here so if you want anything else just ask. Thanks in advance.
html:
<a href="#">
<div id = "item1">
<div id = "header">
<h1>Results</h1>
</div> <!-- header end -->
<img src="Olympics1.png" alt = "olympic pic">
</div><!-- item 1 -->
</a>
css:
.mainBody #item1 :hover
{
background-color: #50B847;
color: #ffffff;
box-shadow: 10px 10px 20px 1px #ccc;
}
#item1 img:hover
{
-webkit-filter: brightness(35%);
}
Try this-
.mainBody #item1:hover
{
background-color: #50B847;
color: #ffffff;
box-shadow: 10px 10px 20px 1px #ccc;
}
.mainBody #item1:hover img
{
-webkit-filter: brightness(35%);
}
Edits-
space removed from .mainBody #item1 :hover
modified #item1 img:hover
Removing space makes the header part work and your image changed when the mouse hovered over it, but in the modified one, hover over 'item1' and it changes how the header and image looks.
I have a page where I have a div that is positioned over another div. The top div is set to be transparent in most places, and not capturing pointer events. I know IE 9 and 10 don't support the CSS pointer-events property, but I'm seeing some odd behavior in IE 9 and 10 when the underlying div doesn't have any content. In those cases, it doesn't grab the mouse events at all. If there's a border or some text content hovering over the border or content does work, but not in the blank spaces of the element. I've tried using the transparent background image, but that doesn't seem to work. I've attached the link to the bare-bones fiddle that reproduces the problem.
HTML:
<div class="topElement"></div>
<div class="bottomElement">Works in IE 9 and 10 only if you hover over text or border.</div>
CSS:
.topElement {
position:absolute;
width: 100%;
height: 100%;
background: transparent;
pointer-events: none;
z-index: 2;
}
.bottomElement {
position:absolute;
width: 100%;
height: 100%;
border: 3px solid black;
background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR??AA7");
}
.bottomElement:hover {
background-color: red;
}
http://jsfiddle.net/MLundin617/jpr3j8jb/4/
The area should turn red when you hover over it.
You must write z-index to ".bottomElement" >=2
I want to add rounded corners to my images using CSS and also change the opacity on mouseover because this is cute. There's a bug: after mouseover, the image disappears.
The CSS is pretty simple:
.article img {
margin-bottom: 5px;
-moz-border-radius: 15px; /* for Firefox */
-webkit-border-radius: 15px; /* for Webkit-Browsers */
border-radius: 15px; /* regular */
}
.article:hover .img {
opacity: 0.8;
}
html also just for a test (this is first image that I have googled):
<li class="article">
<div class="img">
<a href="#">
<img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
</a>
</div>
</li>
You can see it on jsfiddle: http://jsfiddle.net/9DjLT/3/
Browser: ff19
I encountered this problem recently while trying to implement block-level links on my website, and I solved it by adding the following rule to the un-hovered img declaration:
border: 0.001em solid transparent;
A hack, to be sure, but it seems to work.
I think you have problem in css because of li:hover its taking 100% width. So till your mouse cursor on li your image effect by opacity. Just try below change in CSS
.img a:hover{
opacity: 0.8;
}
FWIW, I hit a similar problem in Chrome 38. In my case, I had a div with a border-radius value, and an image element with a transparency value, and the transparent image was hidden. To fix this, I added a non-1 opacity to the parent element (with the border-radius). Something like this:
.round_box {
border-radius: 5px;
opacity: 0.999999;
}
.transparent {
opacity: 0.6;
}
<div class="round_box">
<div class="transparent">
</div>
... Adding opacity: 0.999999; to the parent element made the transparent element display properly. I should note that I also have a lot of other interesting styles going on - drop shadows, column layout - but, maybe a similar hack will work for others.
I've run in to a bit of a problem. I have a menu list where I custom made some image hover states for list items. This worked perfectly fine until I needed to change the menu items (list item text length, etc). I have to go back and re-make all of the images each time something changes.
Here are some images of what I'm trying to accomplish:
Basically the hover adds a red background and a duplicate of that red region rotated ~2 degrees and is lighter colored. Would it be possible to do this via CSS with :after and transform: rotate()? If not, what would be a nice way of accomplishing this effect for varying word lengths?
Thanks ahead of time!
Tre
This can easily be done with transform as you say. You'll need to have two elements in each button though, one for the text and one for the skewed background:
<div class="menu-button">
<div class="text">Screenings</div>
<div class="hover-bg"></div>
</div>
And style the .hover-bg class something like this:
#menu .menu-button:hover .hover-bg
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(220, 50, 50, 0.4);
transform: rotate(2deg) scale(1.05, 1);
transform-origin: center right;
}
Here's an example on JSFiddle
Here's an example where I had some fun with transitions. Due to lazyness I only bothered to make it work in Webkit, meaning Chrome and Webkit.
Note that for cross-browser compatibility you'll need the vendor specific property prefixes (-webkit-, -moz-, etc)
this can be done in pure CSS (not even 3).
On hover have a tilted background image, position it a few pixel to the left and top and add background color.
Because of the background color, you will see only a part of the image:
<div class="text">Screenings</div>
.text {
color: #000;
margin-left: 5px;/*to make room for the hover image */
padding: 4px;
}
.text:hover {
background: #900 url(tiltedimage.png) no-repeat -5px -5px;
color: #fff;
}
This will point you to the solution.