We Keep Coding

How to change opacity of backgroundImage using "INLINE CSS" in react project without affecting the text on the image [duplicate]

Is it possible to set the opacity of a background image without affecting the opacity of child elements?
Example
All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.
HTML
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
CSS
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
}
What I've Tried
I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
/* will also set the opacity of the link text */
opacity: 0.5;
}
I also tried using rgba, but that doesn't have any effect on the background image:
#footer ul li {
/* rgba doesn't apply to the background image */
background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

You can use CSS linear-gradient() with rgba().
div {
width: 300px;
height: 200px;
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
background: black;
color: white;
}
<div><span>Hello world.</span></div>

Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.

This will work with every browser
div {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.
Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

If you are using the image as a bullet, you might consider the :before pseudo element.
#footer ul li {
}
#footer ul li:before {
content: url(/images/arrow.png);
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}

You can put the image in the div:after or div:before and set the opacity on that "virtual div"
div:after {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
opacity: 0.25;
}
found here
http://css-tricks.com/snippets/css/transparent-background-images/

#footer ul li {
position: relative;
opacity: 0.99;
}
#footer ul li::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url(/images/arrow.png) no-repeat 0 50%;
opacity: 0.5;
}
Hack with opacity .99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.
Demo of this technique.

Unfortunately, at the time of writing this answer, there is no direct way to do this. You need to:
use a semi-transparent image for background (much easier).
add an extra element (like div) next to children which you want the opaque, add background to it and after making it semi-transparent, position it behind mentioned children.

Another option is CSS Tricks approach of inserting a pseudo element the exact size of the original element right behind it to fake the opaque background effect that we're looking for. Sometimes you will need to set a height for the pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

The "filter" property, needs an integer for percentage of opacity instead of double, in order to work for IE7/8.
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
P.S.: I post this as an answer, since SO, needs at least 6 changed characters for an edit.

To really fine-tune things, I recommend placing the appropriate selections in browser-targeting wrappers. This was the only thing that worked for me when I could not get IE7 and IE8 to "play nicely with others" (as I am currently working for a software company who continues to support them).
/* color or background image for all browsers, of course */
#myBackground {
background-color:#666;
}
/* target chrome & safari without disrupting IE7-8 */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#myBackground {
-khtml-opacity:.50;
opacity:.50;
}
}
/* target firefox without disrupting IE */
#-moz-document url-prefix() {
#myBackground {
-moz-opacity:.50;
opacity:0.5;
}
}
/* and IE last so it doesn't blow up */
#myBackground {
opacity:.50;
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
I may have redundancies in the above code -- if anyone wishes to clean it up further, feel free!

we can figure out that by not playing with opacity just by using rgba color
e.g "background-color: rgba(0,0,0, 0.5)"
Sample :
Previous Css:
.login-card {
// .... others CSS
background-color: #121e1b;
opacity: 0.5;
}
To :
.login-card {
// .... others CSS
background-color: rgba(0, 0, 0, 0.5);
}

If you have to set the opacity only to the bullet, why don't you set the alpha channel directly into the image? By the way I don't think there is a way to set the opacity to a background image via css without changing the opacity of the whole element (and its children too).

Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.
convert your hex colours to RGBA

I found a pretty good and simple tutorial about this issue. I think it works great (and though it supports IE, I just tell my clients to use other browsers):
CSS background transparency without affecting child elements, through RGBa and filters
From there you can add gradient support, etc.

#footer ul li
{
position:relative;
list-style:none;
}
#footer ul li:before
{
background-image: url(imagesFolder/bg_demo.png);
background-repeat:no-repeat;
content: "";
top: 5px;
left: -10px;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: 0.5;
}
You can try this code. I think it will be worked. You can visit the demo

How to add delay in css hover on a div that was displayed none?

My first div is a simple blue square, my second div is a simple red square with display:none;. when hover the first one (the blue one) the second appears with text and image etc.. but what i want is a simple effect of delay or sliding (if possible, but if not a simple delay would be cool) i'm working on it from 2hours without any success, please any help ?
This is the jsffidle example here
this is my code :
<div class="first">
<div class="second">
<h1 class="hover-title">Hello ! </h1>
</div>
CSS :
.first{
transition-delay:2s;
width:100px;
height:100px;
background-color:blue;
}
h1{
color:gold;
}
.second{
display:none;
background-color:red;
}
.first:hover .second{
display:inline-block;
width:100%;
height:100%;
}
Thank you all.

CSS only solution
I didn't start with your example because you were missing some notions that are important to have in mind when trying to create a sliding div upon an initial one. Let me explain :
JSFiddle
HTML
<div class="content-container">
<div class="content-teaser">
Catchy teaser here
</div>
<div class="content-description">
Description that might be longer than the catchy teaser sentence <button>see more</button>
</div>
</div>
CSS
.content-container {
width : 100px;
height : 140px;
position : relative;
overflow : hidden;
}
.content-teaser {
width : 100px;
height : 140px;
background : blue;
position : absolute;
color : white;
}
.content-description {
width : 100px;
height : 140px;
background : red;
position : absolute;
margin-top : 140px;
transition : .25s;
}
.content-description:hover {
margin-top : 0px;
}
.content-teaser:hover + .content-description {
margin-top : 0px;
}
Explaination
You see 3 <div></div> :
The parent, this is the one which will help us hide the "hidden" div that is in fact marged, but you don't see it because of the property overflow : hidden
The "teaser" div that is the one which is displayed by default
The "hidden" div that is marged and so hidden because of the property right above
So the trick is to use this famous overflow : hidden. You first set all your divs, parent and children, the same width and height. Then, you want to use a special position property to put the "hidden" div on top of the "teaser" div using position : absolute for each one. So the parent will naturally have the position : relative to tell your children div to be position relatively to this div, because by default <body> is in position : relative.
Then, you applyied overflow : hidden to the parent, so when marging the future "hidden" div you will not see it.
Finally, you can use some CSS to alter an element according to the event of an other using + selector. So the following CSS :
.content-teaser:hover + .content-description {
margin-top : 0px;
}
Means :
Put a margin on the div that have the class .content-description when the div with the class .content-teaser is :hovered.

This CSS code may help you to find the solution.
.second{
display:inline-block;
height: 100%;
width: 100%;
background-color:red;
opacity: 0;
transition: opacity 0.5s ease;
}
jsfiddle

You can use css transitions like
#my_div:hover{
/*Your styles placed here*/
-moz-transition:all 1s linear;
-webkit-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
In my case 1s is the delay time, you can change that to any value you like

Onmouseover/out deactivate and reactivate in jQuery

I have a search function that does 3 things:
1) first, when a user hover over the icon, it should change the icon, and the color of border around it as well:
HTML:
<div class="searchbox">
<img id="search" src="Icons/magnifier2.png"
onmouseover="this.src='Icons/magnifier.png'"
onmouseout="this.src='Icons/magnifier2.png'"/>
</div>
CSS:
.searchbox #search {
display: inline;
border: 2px solid #c8c8c8;
position: relative;
height: 20px;
width: 20px;
float: right;
padding: 4px;
border-radius: 5px;
transition: all 500ms;
}
.searchbox #search:hover {
display: inline;
border: 2px solid #808080;
position: relative;
float: right;
padding: 4px;
border-radius: 5px;
transition: all 500ms;
}
So far so good. In this bit, im unsure why the image isnt applied any transition at all when hovered... Is there a way in which you can change color on a single .png icon, instead of juggling between two .pngs?
2) The user is supposed to click on this icon, whereafter it expands with a new icon and a changed border width (padding-left: 130px;). Here goes the following jQuery code:
$(function () {
var search = $("#search");
search.click(function () {
search.attr("src", "Icons/magnifier.png").css({
"border": "2px",
"border-style": "solid",
"border-color": "#808080",
"padding-left": "130px",
"transition": "all 500ms" });
});
});
3) When the user clicks on the HTML body, the border should slide back to normal position and apply the original CSS:
$('html').click(function (e) {
if (e.target.id != 'search') {
$("#search").attr("src", "Icons/magnifier2.png");
$("#search").removeAttr('style');;
}
});
My issue is, the HTML onmouseover/out shown in the top of my post, is still active when the function is fired upon clicking the icon.(if i place my mouse inside and outside the expanded border, it still changes the icon.)
My idea of an easy fix:
It would be a lot easier if the :hover parameter in the CSS could change both the color of the .png and the border, however i've been searching alot for this specific solution, and it doesnt seem to be available!
The second solution would be to add some kind of code in the jQuery, search.click(function() that deactivates the onmouseover/out and reactivates it in the 2'nd .click(function().
I hope im clear enough with my question.
How do i overcome this onmouseover/out issue?
I've added a jsfiddle just for you to see my example:
https://jsfiddle.net/bfytnbs3/

It would be a lot easier if the :hover parameter in the CSS could
change both the color of the .png and the border, however i've been
searching alot for this specific solution, and it doesnt seem to be
available!
You can accomplish that using a CSS sprite. More reading is here: http://www.w3schools.com/css/css_image_sprites.asp
Basically, you'd have one magnifier.png image that would have both states for the icon. Then you'd use some CSS to switch between them.
.searchbox {
background: url('magnifier.png') 0px 0px;
}
.searchbox:hover {
background: url('magnifier.png') 0px -25px;
}
In this example, you'd have a sprite image that was 25px by 50px, with each state of the image being 25px by 25px.
Hope that helps!
Edit to add: Here is a JS Fiddle Example so you can see how it works:
https://jsfiddle.net/s51zjre4/1/

Rotate on Click to Show Info

This is my first question, so please go easy on me. I am trying to make a Tumblr theme in which the posts rotate on the y-axis to show the like and reblog info when you click on them. I have managed to make it so that this happens on hover using the code from here, but as I mentioned, I want to make it so that it happens on click. I've seen a couple of tutorials on how to do this with Javascript or jQuery, but I can't get them to work. So can someone please explain how to do this, in the simplest way possible/in layman's terms, because I am very new to Javascript and jQuery?
Thanks so much!
Here is my CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 250px;
z-index: 1;
perspective: 1000;
}
#f1_card {
width: 250px;
transform-style: preserve-3d;
transition: all 1.3s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
.face {
position: absolute;
backface-visibility: hidden;
}
.face.back {
position:absolute; transform: rotateY(180deg);
background-color:{color:Text};
width:250px;
top:0;
height:100%;
box-sizing: border-box;
text-align: center;
}
...and here is some HTML:
{block:Photo}
{block:IndexPage}
<div id="f1_container">
<div id="f1_card">
<div class="photo"><div class="front-face"><img src="{PhotoURL-250}" alt="{PhotoAlt}"> </div></div> <div class="back face center">
<div class="perm"><span class="like"style="padding-right:7px">{LikeButton color="grey" size="13"}</span> <span class="rb" style="padding-left:5px;">{ReblogButton color="grey" size="13"}</span> <span class="noteslabel" style="padding-right:5px;">{NoteCount}</li></ol></div>
</div>
</div>
</div>
{/block:IndexPage}
{block:PermalinkPage} <img src="{PhotoURL-500}" alt="{PhotoAlt}"> {/block:PermalinkPage} {/block:Photo}
Edit: Here is the link to the page: http://shimmeringdaydreams.tumblr.com. (Sorry it's kind of a mess right now; this is just where I test out my themes that I'm making, and I'm in the middle of making this one.)

If I'm not mistaken, I'm pretty sure Tumblr allows jQuery and Javascript integration.
At the head of your file, put this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
This will allow you to use jQuery. Now, all you have to do is write the click function:
var r=0;
$(document).ready(function() {
$('#Image-ID-or-DIV').click(function(){
$("#Image-ID-or-DIV").css("transition", "500ms linear all");
$("#imgs").css({transform: 'rotateY(' + (r += 180) + 'deg)'});
});
});
0) The r=0 will play a big factor in resetting the animation once it is done.
1) Document.ready is a basic jQuery function, nothing special
2) This states that when the Image (must have an ID) is clicked, a function will be executed.
3) This states that when the image is clicked, the transitions it will have will be 500 milliseconds long (subject to change to your liking) and will go smoothly.
4) The actual rotating of the image happens here. Read some documentation about this. Basically, This states that upon click, the images css will change so that it will rotate r + 180 degrees (r is 0, but it resets the animation, so this is crucial).
If you need to add more css to when the image is clicked, just add:
$("#Image-ID-or-DIV").css('[css goes here]')
But you might want to look at some documentation, as different rules apply to jQuery .css().
I hope this was of some help to you!

I think Ramsay was on the right track with :focus. Try wrapping f1_container in an anchor like this:
<a href="#" class="focus-wrapper"> <!--also stop re-using IDs - they're supposed to be unique-->
<div class="f1_container">
<!-- just pretend I copy+pasted stuff in here -->
</div>
</a>
And then remove the special anchor styles as in HTML Anchor, Disable Style:
.focus-wrapper:hover, .focus-wrapper:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then make a rule to make the change on focus:
.focus-wrapper:focus .f1_container .f1_card {
transform: rotateY(180deg);
}
And remove the browser's focus outline:
.focus-wrapper:focus {
outline:none;
}
Also, in case it's not clear, you'd take out the rule that looks like:
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
Ugly example: http://jsfiddle.net/yb9exv9b/

spinner reloader image seems behind the overlay

I have wrote a code stuff to show a spinner reloader image with overlay. The code is working fine but the problem is that the image seems behind the overlay and is not in the real color also the Loading... text is not coming with the reload image.
My code is as given below
Can anyone please tell me some solution for this
Working Demo
html
<div ng-app='myApp' ng-controller="Controller">
<div id="darkLayer" class="loader ng-hide" ng-show="loader">Loading...</div>
<button ng-click="show()">Show Progress</button>
</div>
script
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.loader = false;
$scope.show = function () {
$scope.loader = true;
};
});
css
.loader {
background-color: #FAFAFA;
filter: alpha(opacity=50);
/* IE */
opacity: 0.5;
/* Safari, Opera */
-moz-opacity: 0.50;
/* FireFox */
z-index: 1000;
height: 100%;
width: 110%;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://i.stack.imgur.com/K8MeK.gif);
position: absolute;
top: 0px;
left: -13px;
}

The loading text is there (top left corner), you just didn't position it to center.
The image is not behind the overlay, but it's opacity is set to 50%, thus the change in color.
For example, here it is without the overlay, the gif is still transparent.
If you want the gif to show with full opacity (and the text also) but keep a transparent overlay, you can use RGBA background-color, like so (live demo):
background-color: rgba(250, 250, 250, 0.5);

I've modified the fiddle you've posted. Please take a look. You have to have an alpha channel in your background color instead of opacity on the entire loader.
The reason why your loader text is not in the right position is that you haven't positioned it to be in the specific position you want! I've fixed this in the below fiddle. Please see how it's done and try to adopt it to your requirement.
Working demo