Develop Reference

How to make background-image transparent but not the text? [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

Pure Javascript alternatives to toggling a CSS class?

My goal is to rotate a div 180deg on each click, without toggling CSS classes.
I can achieve one rotation with the first click (.style.transform =
"rotate(180deg)";), but any subsequent click has no effect.
BTW, why exactly is that? The div's Id hasn't changed, so, in theory, the same trigger (a click, in this case) should call the same function, right? But it doesn't. I wonder what's the logic here, what's the technical explanation, and, moving to practice, how can I further manipulate this post-div (that is, the original div after its JavaScript manipulation) -- again, without toggling CSS classes.
function rotate() {
document.getElementById("container").style.transform =
"rotate(180deg)";
}
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
}
<div class="container" id="container" onclick="rotate()"></div>

The first time you change the transformation from "" to "rotate(180deg)", so it rotates.
Subsequent times you change it from "rotate(180deg)" to "rotate(180deg)" … which isn't a change at all, so nothing happens.
If you want to change it, then you need to actually assign a different value to it.
e.g.
const style = document.getElementById("container").style;
if (style.transform) {
style.transform = "";
} else {
style.transform = "rotate(180deg)";
}
Toggling a class is simpler, and clearer.
document.querySelector("#container").addEventListener("click", e => e.currentTarget.classList.toggle("rotated"));
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
transition: transform 0.25s;
}
.rotated {
transform: rotate(180deg);
}
<div class="container" id="container"></div>

You need to check the transform value and then rotate it anti-clockwise.
Here is the code:
HTML
<div class="container" id="container" onclick="rotate()"></div>
CSS
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
}
JS
function rotate() {
document.getElementById("container").style.transform =
document.getElementById("container").style.transform ===
"rotate(180deg)" ? "rotate(0deg)" : "rotate(180deg)";
}
Here is an example in codepen

The reason why the div is not rotating after first function call is that you are setting the transform style property to constant value (180deg). After first call the transform is performed and all following calls set transform to exactly the same value. In order to make it work, you have to increment rotate property each time you call the function.
In example:
let rotation = 0;
function rotate() {
document.getElementById("container").style.transform = `rotate(${rotation}deg)`;
rotation = (rotation + 180) % 360;
}

I made a fiddle , but basically, you can't rotate for the same value. Of course this is very raw, but prove the concept for you to understand. You can do it more programatically of course.
document.getElementById('container').addEventListener('click', function () {
this.style.transform = this.style.transform == "rotate(180deg)" ? "rotate(-90deg)" : "rotate(180deg)";
}
);
You can check this out: tutorial

<script>
var degrees = 0;
function rotate() {
if(degrees == 180){
document.getElementById("container").style.transform =
"rotate(360deg)";
degrees= 0;
}else{
document.getElementById("container").style.transform =
"rotate(180deg)";
degrees= 180;
}
}
</script>
Clearly is not optimized but could help you.
JSFiddle here

Others have answered your question already, so I will provide with an example to make your code a little bit more dynamic.
/**
* Rotate an <element> with a certain angle <rotateBy>
* 'this' is a reference to itself, which is passed by as an argument from the HTML.
* Change '180' in the method call to whatever to have it rotate differently.
*/
function rotate(element, rotateBy) {
var currentRotation = element.rotation || 0; // default to zero if not existing
newRotation = rotateBy + currentRotation;
element.rotation = newRotation; // store the property in the element
element.style.transform = "rotate(" + newRotation + "deg)";
}
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
transition: transform 400ms;
}
<div class="container" onclick="rotate(this, 180)"
></div>

Is it possible to change :before using javascript or jQuery [duplicate]

This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
fiddle: https://jsfiddle.net/jzhang172/708p96v3/
I'm trying to change the :before background-color using jquery and javascript. From what I've researched, people say it's not possible. How do I change the color of the tint of this image then? If it's possible to do without :before, then that's also fine.
$(function(){
$('.div:before').addClass('wto');
$('.div').css('background-color','orange');
});
.div{
height:500px;
width:500px;
background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
position:Relative;
}
.div:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
background:rgba(22, 255, 171, 0.88);
transition:2s;
}
.div:hover:before{
background:red;
}
body,html{
position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div"></div>

I suppose you want something this:
body,html { position: Relative;}
.div {
height: 500px;
width: 500px;
background: url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
position: Relative;
}
.div:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
background: rgba(22, 255, 171, 0.88);
transition: 2s;
}
/***********check this block**********************/
.div:hover:before {
background: rgba(255, 0, 0, 0.88);
transition: 2s;
}
/*************************************************/
<div class="div"></div>

I came across one dirty trick. May be this might do your work.
$(function(){
$('#changeColor').click(function(){
html = "<style>.div:before{background:rgba(22, 255, 171, 0.75) !important;}</style>"
$('.div').append(html);
});
});
.div{
height:500px;
width:500px;
background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
position:Relative;
}
.div:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
background:rgba(0, 0, 0, 0.75);
transition:2s;
}
body,html{
position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Change
<div class="div"> </div>

If I understand your question correctly, you're explicitly asking how you could do this with javascript.
To my knowledge, there is no way you can affect the pseudo-elements with javascript.
But again, if I'm not mistaken you don't care about pseudo-elements, you just want to colorize an image and change that color on :hover. That actually is possible, it's a bit complicated though, so I can't give you a solution here, just some pointers:
Option one: CSS filters and SVG
Did you know CSS had a filter property that lets you do things like adding blur or changing contrast? Here's a nice overview with examples.
With that property, you can also load a SVG filter and apply that filter to your element, image in your case and probably in most others. SVG filters let you specify a color matrix that can be used to colorized images, actually the CSS filter property already has one SVG filter built in, to colorize images sepia.
So here is a Tutorial about colorizing greyscale images. With a bit of trial and error I think you can build your own color matrix to do the same with color images (especially since they also explain how the sepia matrix works).
Be aware this method has its limits though.
Option two: Javascript magic
I won't write much about these since I found two posts on SO that tell you everything you need to know:
You could either write your own code to colorize the images or use a jQuery plugin to achieve that effect.

Since your Div takes a background-image, I would change the value of background-color in Div instead and give :before's background-color a value of inherit.
.div
{
background-color: rgba(22, 255, 171, 0.88);
}
.div:before
{
background-color: inherit;
}
To change the background-color of Div:before:
Div.style['background-color'] = 'rgba(0, 255, 255, 0.88)';

How to "dim" certain area in a webpage

I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}

It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.

.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>

Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>

Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle

Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>

jquery pan a large image within small div container using buttons

Hi there I need to an interactive element using a large image. This image sized 1000x1000 pixel with simple imagery will contain several questions with yes or no. What I want to do is place this image within a small div (say 500x300) with hidden overflow and add hotspots on the image for the yes/no option. What I want is when the user clicks yes, then the hotspot link pans to specific x/y coordinates of the same large image. Viewer will only see within the 500x300 window. So on and so forth. Is this possible? It seems so simple yet only option I can find is the pan by mouse option or iframe option with complicated divs and anchors. I'm not an expert in java/jquery but would love to find a script that is adaptable. Please help!

This sounded fun so I made a custom solution real quick. Demo here: jsBin
It's heavily reliant on the proper CSS, so check that in the bin, but here's the JS part:
var choice = document.querySelectorAll('.choice'),
image = document.getElementById('image')
for ( var i=0; i<choice.length; i++) {
choice[i].addEventListener('click', function (event) {
var x = this.dataset['x'],
y = this.dataset['y'];
image.style.top = '-'+y+'px';
image.style.left = '-'+x+'px';
})
}

Use css transitions for animation. Set up the positions you want the buttons to move the image around to in the image using a series of javascript objects. Then, set up your anchors, text, etc using absolute positioning on top of the image inside of a div container. Finally, add a click action in jQuery to assign your different positions to the top and left css of that container.
The end result, then, will be that you click an anchor, the left and top positions are assigned to the container via css in jQuery, and the transitions will slide the image around with the anchors.
I set up a fiddle here.
Here's the html from the fiddle:
<div id="window">
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
<ul>
<li><a id="city" href="#">City</a></li>
<li><a id="bottom" href="#">Bottom</a></li>
</ul>
</div>
</div>
And the CSS:
#window {
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
#window a {
position: absolute;
z-index: 2;
display: block;
padding: 10px;
background: rgba(255,255,255,.5);
}
#city {
top: 20px;
left: 20px;
}
#bottom {
top: 220px;
left: 220px;
}
#container {
-webkit-transition:left 2s, top 2s, -webkit-transform 2s;
transition:left 2s, top 2s, transform 2s;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
Here's some javascript to give an example of setting up the positions as objects.
var city = {
top: -200,
left: -200
};
var bottom = {
top: -700,
left: -100
}
$('a').click(function() {
var t = this.id;
var c = $('#container');
if (typeof eval(t) !== 'undefined') {
c.css({
'top': eval(t).top,
'left': eval(t).left
});
}
});

I've just made a Fiddle with a demo image from where you could proceed.
HTML:
<div class="imgHolder">
<div class="hotspot one">Click</div>
<img src="image.jpg" />
</div>
CSS:
.imgHolder {
overflow:hidden;
width:300px;
height:300px;
position:relative;
}
.hotspot.one {
position:absolute;
top:10px;
padding:2px;
background-color:#fff;
left:10px;
}
.hotspot:hover {
cursor:pointer;
}
img {
position:relative;
z-index:-1;
}
jQuery:
$(".hotspot").on("click", function () {
$("img").animate({
"right": "+=100px"
});
});
For reference: http://api.jquery.com/animate/
You could e.g. fade hotspots in and out on specific positions and use animate() to move to the next hotspot.