I need to put a set of b/w images with colored borders on the page. I don't want to edit the images in Photoshop, since there may be some dynamically added ones later on; hence, I've used the corresponding filter:grayscale(100%).
img.myImage {
display: block;
position: relative;
border: 6px solid #0090ff;
width: 85%;
margin: 0 auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
However, it affects the colored border, which also becomes grayish. Is there a "painless" workaround here?
Since img does not accept :after/:before, and since filter seems to apply on children elements, the only solution I can think of is the basic:
div {
display: inline-block;
background-color: #0090ff;
padding: 6px;
width: 200px;
}
img {
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
}
<div>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" />
</div>
Related
I have some css in place that uses both a border-radius and a grayscale filter. I want the border radius to be in place all the time but the grayscale to disappear on hover.
The border radius works fine until I add in the grayscale, then it stops working and just shows the images as a square. On hover (when the filter is removed) the border-radius kicks in again. Does anyone know what I am missing?
I have searched but can't find an answer.
.esg-entry-media {
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 50% !important;
border-radius: 50% !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.esg-entry-media:hover {
border: solid 10px #fff !important;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
I have included an image of the hover and non-hover states for reference.
You could use a div to wrap around the image put an overflow: hidden; on it and give the div the same width and height. Then put border-radius: 50%; on the div. Only apply the grayscale on the image. At the end to change the img do,
div:hover .esg-entry-media{
filter: grayscale(0)
}
On the wrapping div do,
div:hover {
border: 10px solid *coloryouwant*
}
which browser? works fine for me (chrome, firefox, safari):
.esg-entry-media {
width: 250px;
height: 250px;
border: 10px solid transparent;
border-radius: 50%;
filter: grayscale(100%);
}
.esg-entry-media:hover {
border-color: #a00;
filter: grayscale(0%);
}
<img src="http://placekitten.com/200/300" class="esg-entry-media" />
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I have several buttons with different background images.
I would like to achieve to have a grayscale filter on them by default and on hover remove the grayscale filter.
I have this already but the problem is that the text of the buttons are also grayed out which i would like to avoid.
I Couldn't figure out how to apply grayscale filter only on button backgrounds but not on text.
Now I have a main css class for the buttons
.box {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position:relative;
color: red;
cursor:pointer;
text-align: center;
width: 160px;
height: 160px;
}
.box:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
color: blue;
}
and I apply the backgrounds for each button in html code
<button onclick="buttonFunction()" button class="button box" style="background: url(background1.jpg); background-size: 100%;" >Gray button text:( </button>
Any idea how to add grayscale filter only button backgrounds and keep the button texts colored?
Thanks
Applying the filter property to an element will affect the children of that element. You will not be able to unset / reset the filter property for the children.
If you don't want to / can't use the pseudoelement approach in the other answers, then you could change your HTML to create the effect you want.
Add the image as an img element in the button, and place the text in a span. You can then apply the filter to the img.
.box {
cursor: pointer;
width: 160px;
height: 160px;
position: relative;
padding: 0;
display: inline-flex;
justify-content: center;
align-items: center;
}
.box img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: absolute;
max-width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.box:hover img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.text {
color: red;
z-index: 1;
}
.box:hover .text {
color: blue;
}
<button onclick="buttonFunction()" button class="button box"><img src="https://unsplash.it/200x200"><span class="text">Gray button text:(</span></button>
As Temani Afif also points out pseudo elements are your way to go although I would like to add a bit different way of positioning which I believe might be more precise and more easy to adapt to a responsive design.
The key part is making the .box have the same height and line-height which will also be the height of our :after content. Then the absolute positioning (0-0-0-0) will center it automatically.
.box {
position: relative;
color: #ff0000;
text-align: center;
width: 300px;
height: 300px;
line-height:300px;
}
.box:before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
filter: grayscale(100%);
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/16777216colors.png/220px-16777216colors.png);
background-size: cover;
}
.box:hover:before {
filter: grayscale(0%);
}
.box:after {
content: 'Text Text Text';
position: absolute;
left:0;
bottom:0;
right:0;
top:0;
display: inline-block;
vertical-align: middle;
}
<button type="button" class="box">Button</button>
I would like to have a blurred background, while the edges of this Background shall not be blurred. I want the blurred image to entirly fill the background of its paaernt container.
My current solution is:
HTML
<div class="wrapper">
<div class="background"></div>
<div class="text">Lorem Ipsum dolor sit</div>
</div>
CSS
.wrapper {
display: block;
position: relative;
width: 240px;
height: 300px;
overflow: hidden;
border: 1px solid blue;
}
.wrapper .background {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://photo.elsoar.com/wp-content/images/Strawberry-afbeelding.jpg');
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.wrapper .text {
position: absolute;
display: block;
top: 40%;
left: 0;
width: 100%;
height: 60%;
background: rgba(0,130,120,0.5);
color: white;
padding: 10px;
font-size: 2rem;
}
How can I get "no blurry edges", but a blurred image fillingth entire "blue" box?
Thanks a lot.
Working sample:
http://codepen.io/anon/pen/alnDr
The only solution I can think of is using clip property, however it's very tricky, it requires the element to have absolute position. In this case the width clipped should be less than the width of the element, if it's equal to the element's width, it can't clip the blur (strange enough). So we have to set it about 1px less than the element's width, however the border will be broken, so we have to use box-shadow to mimic the border. You can also wrap some element around and set the border for the outer element instead:
.wrapper {
display: block;
position: absolute;
width: 240px;
height: 300px;
overflow: hidden;
box-sizing:border-box;
clip:rect(0,239px,300px,0);
box-shadow:0 0 0 1px blue inset,
-2px 0 0 0 blue inset;
}
Updated Demo.
Another solution can also be used if the background around your div is a solid color, in such a case you can use box-shadow to cover the outer blur like this:
.wrapper {
display: block;
width: 240px;
height: 300px;
overflow: hidden;
position:relative;
border:1px solid blue;
box-shadow:0 0 0px 10px white; /* the surrounding color is white */
}
Note that the inner blurry image should be set with z-index:-1 so that it comes behind the box-shadow, otherwise the box-shadow can't cover the outer blur.
Demo 2
I am having issues viewing my site in Internet Explorer. In the following CSS/HTML the image is supposed to be outlined, curved radius, and scaled to fit. However IE 8 does not scale the image, curve the corners, nor does the outline appear. Here is the jsfiddle: http://jsfiddle.net/pave4/ This page is fine in the newest IE (IE8), however I need to make sure it also works on older versions of IE.
HTML:
<ul>
<li>
<a href="/aboutme/">
<span class="img-outline"><span class="page-img" id="aboutme"></span></span>
<span class="page-title">About Me</span>
</a>
</li>
</ul>
CSS:
.page-title {
text-align: center;
display:block;
text-decoration: none;
}
.img-outline {
height: 100%;
background: rgba(0, 0, 0, .3);
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 18%;
-moz-border-radius: 18%;
border-radius: 18%;
}
.page-img {
height: 100%;
background: rgba(50, 50, 50, 1);
background-size:115px 115px;
background-repeat:no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
}
li,
li.current,
li.current:visited {
margin-left: 1px;
margin-right: 1px;
width: 118px;
height: 112px;
display: block;
float: left;
position: relative;
opacity: .6;
}
li:hover { opacity: 1; }
li .img-outline {
width: 70px;
height: 70px;
}
li .page-img {
background-size:70px 70px;
}
li #aboutme {
background-color: rgb(36, 112, 245);
background-image: url('http://www.rasnickjewelry.com/images/uploads/900_Animals_300/901_Elephant_Head_Ring_side_R300.jpg');
}
You're using lots of CSS3 attributes that IE8 doesn't support I'm afraid.
As I said in my comment to your original Question, IE up to 8 didn't support rgba colors. Since you don't use the alpha channel, use background-color: #323232; instead.
IE8 also doesn't support the standard opacity property, you need filter: alpha(opacity=60); instead (percantage value sans the %). Related could be that elements in IE require layout to render correctly: There is a bunch of articles covering this topic. A good one is On Having Layout.
To get a feel for what css properties and features are supported use resources such as When Can I Use or Quirksmode
Do not resize images with styles upload them in the exact size, that will save you loading time.
About the other syles like the border radius try to use this tool http://css3pie.com/
I have the css code below along with an image to show it's output. I need help though 2 things.
This code works pretty good to show the username on the photo, however I noticed today while using chrome all day often when I would click a link that would take me to the page that has images with this code, it would not show the name on the image, it would just show the name below the image and the transparent black div would not be visible at all and the name would not even be on the image, I would then refresh the page and it would work fine, what could cause this, this was while my PC was acting like it was short on memory, could that be part of the issue?
I would like to make a bar show at
the top of the image that is the
width of the image and like maybe
2-3 pixels tall and have a
background color of like blue. What
I am wanting to accomplish is for
femail users there will be a pink
bar over there image and a different
color for males. Can someone who
knows css help me modify this to do
that the best please
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
<img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
<div class="blackbg"></div>
<div class="label">Sara</div>
</div>
Since I've written this code for you, seems logical that I also try to fix it...
It seems that Chrome is struggling since it doesn't know the height of the element. Let's use margins instead of positioning
Also, since you are using a set height, you could drop positioning all together and use the following CSS (In which case you shouldn't need the above code):
div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
position: relative;
margin: -15px 0 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
EDIT: You've asked for a top colored bar for the gender. You can use the following HTML:
<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
<img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
<div class="blackbg"></div>
<div class="label">Sara</div>
</div>
With the following CSS:
div.imageSub img.female { border-top: 10px solid red; }
div.imageSub img.male { border-top: 10px solid blue; }