CSS Grayscale image cannot get header to be a different colour - html

I am having issues in setting the colour of my header h2 that is on top of a image that I am setting to grayscale. I want it to be orange but as I have added grayscale it is overriding my css to make the h2 text grey.
My html code is the following:
<div id="thumbnails" class="pt-page pt-page-current">
<div class="scalediv">
<div class="row no-gutter" data-id="one">
#for (var i = 0; i < Model.Count; i++)
{
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<figure class="callpost" data-num="#Model.Article[i].DataNumber" style="background-image: url('#String.Format("data:image/png;base64,{0}", Convert.ToBase64String(#Model.Article[i].Picture.Image))');" data-property="border-width" data-from="0" data-to="35px">
<div class="content">
<div class="content-wraper">
<h2>#Model.Article[i].Title</h2>
<div class="excerpt">#Model.Article[i].IntroText</div>
<div class="postinfo"> ARTICLES <span>#Convert.ToDateTime(Model.Article[i].DateCreated).ToString("dd/MM/yyyy")</span> </div>
</div>
</div>
</figure>
</div>
}
<div class="clear"></div>
</div>
</div>
This is my CSS for the grayscale:
#thumbnails figure {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#thumbnails figure:hover {
-webkit-filter: grayscale(0);
filter: none !important;
}
I have tried adding to the css like this:
#thumbnails figure h2{
color: #DD2C00 !important;
}
This is my CSS for the header:
figure .content h2 {
color: #DD2C00;
font-family: FuturaBT-Medium;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 47px;
margin-bottom: 20px;
}
Along with other attempts and trying to change the CSS for the h2 but I cannot get the header to display in orange while the image is in gray scale.
Any ideas or pointers would be really appreciated.

Your code does not work, because the filters are calculated after the DOM rendering. Therefore, !important will have no effect.
To disable the filter effect to h2, you need to bring it out. You can visually put h2 on the figure in different ways, such as a negative margin.
Example:https://jsfiddle.net/j9fbc0sw/3/
Sorry for my English)

Related

Apply CSS Filter to all but specific sub-elements

I need a CSS filter to apply to all elements in a container, except for specific ones. Quick example to explain the situation:
<div class="container">
<img class="one" src="blah" />
<img class="two" src="blah" />
<img class="three" src="blah" />
</div>
Then I am applying filters as so:
.container {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
So the container has the greyscale filter applied to it, and all img in it are turned to grey. However, I want one of the img to not turn to grey:
.two {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
However, this is not working. The filter of the container seems to be overriding the filter of the contained element.
Any ideas how I can get around this? Is there an easy way, or do I have to write up some jQuery to look at all the elements that aren't ".two" and apply the filter to them, rather than the container?
Update: I neglected to mention an important caveat: The container has to be greyscale, due to it having a background-image property that is to also be turned grey. This little snippet is part of more containers that are all going greyscale as well, I'm really just trying to figure out if there's a way to have an overriding exemption to the rule on the parent, since the parent has to have the rule as well.
According to CSS specifity rules -
Either put the .two after the .container in the css,
Or make the .two more specific, i.e. img.two
UPDATE
The .container rule is on the div itself - not on the images. So the container goes grayscale regardless of what you tell the images to do. Try changing that into .container img, and then try incorporating the answers you received.
use > to specify an image that is a child of .container the use not: to specify that you don't want the second image grey
.container > img:not(.two) {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
<div class="container">
<img class="one" src="http://lorempixel.com/400/200" />
<img class="two" src="http://lorempixel.com/400/200" />
<img class="three" src="http://lorempixel.com/400/200" />
</div>
jsfiddle
.container > img:not(.two) {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Use :not to exclude .two
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.
.container img:not(.two) {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Seven years after this question was asked, I thought I'd come up with a brilliant CSS-native solution to this, using:
calc()
CSS Custom Properties
Hours of experimenting with CSS filter have satisfied me that the solution will never work.
Why not? Because functions like filter: hue-rotate() are both more complicated than you might expect and also, unhelpfully, unreliable.
My first ("clever") solution
(Calculate reverse transformations - cute, but doesn't work)
The starting point of my "clever" solution was:
It's well-established that once you apply filter to a parent element, that filter (much like opacity) continues to apply to all descendant elements and there is no way to mask a descendant element from that filter.
But filter simply describes transformations, right? And - surely - anything transformed can be un-transformed via a transformation which represents a mirror-image of the original?
Furthermore, if the original transformation is built in the right way from CSS Custom Properties, then it ought to be possible to build the mirror-image transformation using the same CSS Custom Properties and calc().
So I came up with something like this:
/*
OTHER CSS CUSTOM PROPERTIES (NOT NECESSARY FOR THIS EXAMPLE)
.square[data-theme="green"] {
--saturation: 1;
--contrast: 0.775;
--brightness: 1.2;
}
.square[data-theme="blue"] {
--saturation: 1;
--contrast: 0.775;
--brightness: 1.2;
}
.filter {
--lightness: contrast(var(--contrast)) brightness(var(--brightness));
--hsl-filter: hue-rotate(var(--hue)) saturate(var(--saturation)) var(--lightness);
}
.no-filter {
--reverse-lightness: contrast(calc(1 / var(--contrast))) brightness(calc(1 / var(--brightness)));
--reverse-hsl-filter: hue-rotate(calc(0deg - var(--hue))) saturate(calc(1 / var(--saturation))) var(--reverse-lightness);
}
*/
h2 {
position: absolute;
top: 0;
left: 0;
z-index: 6;
margin: 2px 0 0 2px;
padding: 0;
color: rgb(255, 255, 255);
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
}
.square {
position: relative;
float: left;
display: inline-block;
width: 92px;
height: 92px;
margin: 2px;
padding: 6px;
background-color: rgb(191, 0, 0);
box-sizing: border-box;
}
.square:nth-of-type(4) {
clear: left;
}
.circle {
width: 80px;
height: 80px;
padding: 30px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
box-sizing: border-box;
}
.inner-square {
width: 20px;
height: 20px;
background-color: rgb(255, 127, 0);
}
.square[data-theme="green"] {
--hue: 112.5deg;
}
.square[data-theme="blue"] {
--hue: 212.5deg;
}
.filter {
--hsl-filter: hue-rotate(var(--hue));
filter: var(--hsl-filter);
}
.no-filter {
--reverse-hsl-filter: hue-rotate(calc(0deg - var(--hue)));
filter: var(--reverse-hsl-filter);
}
<div class="square">
<h2>Original</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="green">
<h2>Filtered</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="green">
<h2>No-Filter Test</h2>
<div class="circle no-filter">
<div class="inner-square"></div>
</div>
</div>
<div class="square">
<h2>Original</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="blue">
<h2>Filtered</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="blue">
<h2>No-Filter Test</h2>
<div class="circle no-filter">
<div class="inner-square"></div>
</div>
</div>
It's less obvious in the top row (at first glance), but in the second row, the last square (ie. bottom right) clearly shows how this reverse-transformation approach is neither robust nor reliable:
The orange square in the bottom-right square isn't perfect, but it's close enough to the original
The orange square in the top-right square is less perfect, but it's still passable (just about)
The red circle in the top-right square isn't perfect, but it's close enough to the original
The red circle in the bottom-right square is no good at all
My second (less clever) solution
(Make the non-filtered element a sibling instead of a descendant element - less clever but it does work)
We may conclude from the above that the matrix transformation initiated by filter: hue-rotate() cannot be easily reversed - and that even if a computational way to reverse it consistently via JavaScript can be found - I'm currently doubtful over whether even that is possible - it's almost certainly not going to be possible via CSS calc().
Alternatively, we can turn the descendant elements we don't want to be affected by the filter into siblings of the element which has the CSS filter applied to it, instead:
h2 {
position: absolute;
top: 0;
left: 0;
z-index: 6;
margin: 2px 0 0 2px;
padding: 0;
color: rgb(255, 255, 255);
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
}
.container {
position: relative;
float: left;
display: inline-block;
width: 92px;
height: 92px;
margin: 2px;
background-color: rgb(0, 0, 0);
box-sizing: border-box;
}
.container:nth-of-type(4) {
clear: left;
}
.square {
width: 92px;
height: 92px;
background-color: rgb(191, 0, 0);
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
margin: 6px;
padding: 30px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
box-sizing: border-box;
}
.inner-square {
width: 20px;
height: 20px;
background-color: rgb(255, 127, 0);
}
.container[data-theme="green"] {
--hue: 112.5deg;
}
.container[data-theme="blue"] {
--hue: 212.5deg;
}
.filter {
--hsl-filter: hue-rotate(var(--hue));
filter: var(--hsl-filter);
}
<div class="container">
<h2>Original</h2>
<div class="square"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="green">
<h2>Filtered</h2>
<div class="square filter"></div>
<div class="circle filter">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="green">
<h2>No-Filter Test</h2>
<div class="square filter"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="container">
<h2>Original</h2>
<div class="square"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="blue">
<h2>Filtered</h2>
<div class="square filter"></div>
<div class="circle filter">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="blue">
<h2>No-Filter Test</h2>
<div class="square filter"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
This second solution works perfectly, but it requires the HTML to be restructured and the CSS adjusted to compensate:
the filtered element from the original setup needs to be placed within a container element
the non-filtered descendant of the filtered element now needs to become a sibling of the filtered element, within the same container
finally, the non-filtered sibling needs to be re-positioned within the container so that it displays in the same place as before, back when it was a descendant
After taking some time to re-arrange markup and re-adjust styles, we can achieve the originally intended effect with some elements filtered and other elements non-filtered.
This second approach feels much less elegant than calculating mirror-image colour-transformations via CSS Custom Properties and calc() but until some kind of filter mask like:
filter-apply: all | none // or even (2 - n), (n + 3) etc.
is introduced into CSS...
... the only way for a child-element to be masked from a filter is to turn the child-element into a sibling-element.

How to show image caption in ionicframework?

<ion-view title="Categories">
<ion-content ng-init="loadImages()">
<div id="catlist">
<div class="row" ng-repeat="image in images" ng-if="$index % 2 === 0">
<div class="col" ng-if="$index < images.length">
<a data-id="{{cats[$index].CategoryID}}" >
<span id="Content" class="col col-25 ">{{cats[$index].CategoryName}}</span>
<img ng-src="{{images[$index].src}}" width="100%" />
</a>
</div>
<div class="col" ng-if="$index + 1 < images.length">
<a data-id="{{cats[$index+1].CategoryID}}" >
<span id="Content" class="col col-25 ">{{cats[$index+1].CategoryName}}</span>
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
#Content {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
color: #f4f2f3;
height: auto;
position: absolute;
text-align: center;
width: 310px;
text-decoration: none !important;
background-opacity: 0.1;
font-family: arial;
font-size: 15px;
font-weight: bold;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
I have create the 2*2 image grid and shows the image caption on top of the image. But image caption width doesn't fit to image width. I am using ionic framework. How can I adjust image caption width depends on image width?
From checking in your css for #Content (this should be changed to class instead of id, because it suppose to has only one element for one id per page. But I don't think this why problem occur)
In your #Content style can you please try to change from
width: 310px;
to
width: 100%;
If this not work, try to add
display: block;
Hope this help, and sorry for my English :)

Transparent div but not the contents inside it

Before I begin, yes I know this question has been asked many times but I cannot get it to working anyway. I have a div which is transparent but the contents i.e. text and input fields that I dont wan't to be transparent.
Please don't link to previous answers as I followed them but without success.
Here's what my CSS code looks like:
.csmodal {
height: 300px;
width: 600px;
background-color: rgba(25, 11, 36, .5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
float: none;
display: inline-block;
padding: 30px;
margin: 200px auto;
opacity: 0.4;
}
.cs-container {
margin-right: auto;
margin-left: auto;
}
#cs-headline {
margin-bottom: 20px;
}
#cs-description {
font-size: 14px;
line-height: 20px;
color: #eeee22;
}
h1 {
margin: 10px 0;
text-rendering: optimizelegibility;
color: #eeee22;
}
HTML code:
<div class="cs-container">
<div class="row">
<div class="col-md-6 col-md-offset-3 csmodal">
<h1 id="cs-headline">Website Launching Soon</h1>
<div id="cs-description">
<p style="text-align: center;">The launch of our official website is coming soon. Stay tuned!</p>
</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
</div>
</div> </div>
Specifying element opacity changes the opacity for the parent and all children.
Thinking in terms of functionality all we want is to be able to see the background. in that case we can apply a background color or an alpha channel like so: background-color:rgba({0 -255},{0 -255},{0 -255},[0 - 1] the last part determines opacity.
In case you want to have an image with an alpha channel you need to have a transparent asset. like so.
Use your imagination if you can position an element in absolute position and apply opacity to that and so on

Fade image out and fade text in on rollover

This is the website I'm working on: http://threesamples.tumblr.com
I'm having the most idiotic problem, but nothing I try seems to work, so I figured I'd come here.
I'm working with a Tumblr theme that doesn't have support for captions (except when clicking through to the image post itself).
What I'm trying to do is place the caption text inside a div on the top center of the photo, so that on rollover:
- photo fades out
- text fades in
Here is the CSS I've got so far:
article.type_photo .photo-stage {
background: {color:Photo Background};
position: absolute;
}
article.type_photo .photo-stage:hover {
background: {color: BackgroundColor};
opacity: 0.5;
transition: 0.75s;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
}
article.type_photo .caption-wrap {
background: transparent;
width:720px;
height:300px;
padding-top:10px;
position: relative;
margin: 0 auto;
float: left;
}
article.type_photo .caption {
visibility: hidden;
position: absolute;
margin: 0 auto;
}
article.type_photo .caption:hover {
visibility: visible;
position: absolute;
color: #ffffff;
opacity: 1;
font-family:"Open Sans";
font-size:14px;
text-align: justify;
transition: 0.75s;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
}
and here is the Tumblr code for dealing with photo posts:
{block:Photo}
<!-- Photo Post -->
<div class="photo-stage {select:Image Height}">
<div class="photo-wrap" style="background-image: url('{PhotoURL-HighRes}');">
{block:IndexPage}
<img src="{PhotoURL-HighRes}" />
</div>
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" />{LinkCloseTag}
{/block:PermalinkPage}
</div>
</div>
<div class="caption">
{block:Caption}
{Caption}
{/block:Caption}
{block:Caption Hover}
{Caption Hover}
{/block:Caption Hover}
</div>
{/block:Photo}
I've managed to get the image to fade out, but cannot for the life of me get the text to fade in. Can someone tell me what I'm doing wrong?
So I'm not an expert but I think your problem is that position is not an animatable property. You need to specify that you only want the transition to apply to the visibility property, like so:
transition:visibility 0.75s;
-moz-transition-property:visibility;
-webkit-transition-property:visibility;
-o-transition-property:visibility;
-moz-transition-duration:0.75s;
-webkit-transition-duration:0.75s;
-o-transition-duration:0.75s;
(Or you should be able to merge it all into one statement for the browser-specific statements, too, but you specifically used transition-duration for those, so I left them that way.)
Source:Using CSS Transitions, CSS Animated Properties

How To Add An "a href" Link To A "div"?

I need to know how to add an a href link to a div? Do you put the a href tag arounf the entire "buttonOne" div? Or should it be around or inside the "linkedinB" div?
Here's my HTML:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
Can't you surround it with an a tag?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
try to implement with javascript this:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
In this case, it doesn't matter as there is no content between the two divs.
Either one will get the browser to scroll down to it.
The a element will look like:
buttonOne
Or:
linkedinB
Try creating a class named overlay and apply the following css to it:
a.overlay { width: 100%; height:100%; position: absolute; }
Make sure it is placed in a positioned element.
Now simply place an <a> tag with that class inside the div you want to be linkable:
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
PhilipK's suggestion might work but it won't validate because you can't place a block element (div) inside an inline element (a). And when your website doesn't validate the W3C Ninja's will come for you!
An other advice would be to try avoiding inline styling.
I'd say:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
However, it will still be a link. If you want to change your link into a button, you should rename the #buttonone to #buttonone a { your css here }.
Your solutions don't seem to be working for me, I have the following code. How to put link into the last two divs.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<style>
/* Import */
#import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
font-family: "Quicksand", sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.025s ease;
}
/* Colors */
#ora {
background-color: #e67e22;
}
#red {
background-color: #e74c3c;
}
#orab {
background-color: white;
border: 5px solid #e67e22;
}
#redb {
background-color: white;
border: 5px solid #e74c3c;
}
/* End of Colors */
.B {
width: 240px;
height: 55px;
margin: auto;
line-height: 45px;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#orab:hover {
background-color: #e67e22;
}
#redb:hover {
background-color: #e74c3c;
}
#whib:hover {
background-color: #ecf0f1;
}
/* End of Border
.invert:hover {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2>
<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>
</html>