I need to reduce the opacity of image in site and I did it by decreasing opacity value in below code. But when I tried to search code: opacity: 0.3, I didn't get that code anywhere in the site files. I tried fgrep -r "opacity : 0.3", and still I didn't find it. Opacity code is coming from 3rd party plugin we are using.
Is there any way to override that opacity of the image [ Means Image which is displaying outside the Mug in link by adding new class?
Image :
Overriding style can be done with
style="opacity:1"
at the element.
Or create a new class in your css:
.aitraph>svg>image{
opacity:1 !important;
}
and give your element this ccs class.
The only way you could override it is by using the !important tag after you CSS property in your stylsheet. If you do not use the important then than the inline style will always take precedent to any style sheets.
Example:
.whateverClass {
color: 000 !important;
}
Edit: Now knowing that you do not have the ability to add a class to the element, you can use css child selectors as outlined below as I can see an ID on the svg parent object that you could target:
https://jsfiddle.net/sLtgsqyk/
html example:
<div id="test">
<svg width="391" height="391" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<image href="https://i.stack.imgur.com/KUQYl.png" x="0" y="0" height="1276" width="2000"/>
</svg>
</div>
CSS:
#test > svg > image
{
height: 1000px !important;
width: 1500px !important;
}
You can add new class to image (e.g. .opacity_img) and set style opacity:0.3!important
Don't like !important but it can help you
Related
I am using a js library (mermaid) to generate svg on a web page. I need to dynamically apply styling to parts of the svg as the user activates various commands using keyboard shortcuts, Particularly, I need to highlight the element in the svg that is currently designated as the selected one in the logical model. Looking at other questions on dynamically styling svg deal with inlined static svg, so they probably don't apply to my case and none of the methods I tried so far have worked.
The style I am trying to apply is
border-radius : 2rem; box-shadow : 0 0 3rem red;
when applied to regular html, this gives the element a glowing red border.
First thing I've tried was to include this as a class in a element in like this :
<style>
.highlight {
border-radius : 2rem;
box-shadow : 0 0 3rem red;
}
</style>
Adding the class to a regular html element 's class list like an , , or , would produce the desired styling. However when I would programmatically get a element and add the class to its class list, then it would remain without the glowing border. Inspecting the svg using chrome developer tools revealed that the relevant class has been added to the element's class list. Using the same method was successful for regular html. For reference here is the method I used to add the class:
graphicDiv.querySelector(selector).classList.add('highlight')
This having failed, I thought maybe the svg had some styling inside its internal element that overrode my styling, so I added !important to my styles so they would have highest precedence. This still failed to work, so next I tried to set the style property for the element, which should have the highest precedence like this:
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')
This still failed to produce any difference in the styling of the svg. Inspecting the element in chrome dev tools revealed the style attribute was indeed set.
I also tried adding my style definition to the svg's own element, by getting it after the svg is generated, and appending my class style definition to its text content. It would still not work.
Finally, I thought those css properties might not be supported by , so I changed them to background-color: green; instead, since I think I saw in an article on styling svg with css that this css prop was used on an . This didn't work. I tried applying to a element in the svg. Didn't work either.
I am completely baffled why none of this is working. I would massively appreciate if anyone could help me understand how I could dynamically change the styling of svg elements!
While normal CSS attributes can be given to SVG elements, most do nothing as SVG elements by definition adhere to a different set of styling rules.
A simple example is that in normal CSS you might set left: 25px but for SVG you would need to set x: 25.
For the styling you want, border radius is usually achieved with stroke-width. For background colour just use fill. As for a shadow, it may be a little more complex but you should have a look at feDropShadow.
Besides that, applying those styles with css rules should be roughly the same.
I hope that's at least some help.
I'm trying to use an SVG library like Two.js or SVG.js and alter (on-the-fly) their dynamically generated SVG elements in order to make them responsive. I have a basic example here, showing how a predefined, inline SVG can be responsive.
It involves wrapping the SVG element in a container, assigning some CSS values, adding viewBox and preserveAspectRatio attributes. This appears to be the common way to do responsive SVG elements:
http://jsfiddle.net/N4PK4/
<div class='container'>
<div class='svg-container'>
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="1" />
</svg>
</div>
</div>
.svg-container {
display: inline-block;
position: relative;
width: 100%;
outline: 1px solid red;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.container {
max-width: 400px;
}
However, when I dynamically generate an SVG element with Two.js, and then I try to use jQuery to edit the DOM and make the SVG element responsive (similar to the above example), the SVG element is no longer visible:
http://jsfiddle.net/g5WZj/5/
You can see that I have two SVGs in that example. The first one is the one that doesn't show up. The second, is the inline, static SVG markup that I copied from what was generated in the first example. So obviously, it is not the markup that is the problem.
Also, here is a similar example using svg.js. Same result:
http://jsfiddle.net/3Luaw/5/
So basically, the problem lies in the fact that if you create a static SVG element in your HTML, then it's easy to make it responsive. But if you try to dynamically create an SVG element, its difficult (or impossible I dunno?) to make it responsive.
I know that the SVG DOM is kind of different than the normal HTML DOM, so there can be unexpected results when trying to make changes to it dynamically.
How do I overcome this hurdle?
Sure, the SVG DOM is kind of different than the normal HTML DOM. So you'd better to use special-purpose svg lib to handle that. Use SVG.js or two.js to modify SVG node, not jQuery.
If you want to your app will be compatible with old bjust start your work, you can try Raphealjs too.
In your example http://jsfiddle.net/g5WZj/5/ the reason why your "dynamic" svg doesn't show up is because you haven't set a size on it. If you rightclick the svg part and inspect the svg element you'll find that its computed layout size in the page is 0x0.
You can set the width and height attributes on the <svg> element, or you can add something similar to your css stylesheet, e.g svg { width: 500px; height 500px; }
I would like to be able to hover over an image and only the background itself to turn black (with opacity to control how much). I already have have an effect for the image itself when it's on hover, but I would like to add an effect where the background which is white to turn to a darker color. Being able to manipulate it later on with opacity and transition would be best, but I have not been able to find css3 or jquery code that works for this so far to get me to that point. Any help would be appreciated.
html
<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>
css
.template_design2 {
background-image:url(img/template_design2.jpg);
width:740px;
height:280px;
background-repeat:no-repeat;
float:left;
}
.template_design2:hover {
background-position:0 -280px;
}
You need to add a class to your <a>s that contain the background images, so you can target them.
You use .template_design:hover, so to target the first one (since it has no class, but you can use its ID to test it works quickly, then assign all <a>s inside .template_design a class so you can target them all at the same time):
.template_design:hover a#zapzonePoster { opacity: 0.5; }
Here's a fiddle showing how it works:
http://jsfiddle.net/v6aNY/
So once you know that's working, you could then assign a class so it would be more like:
.template_design:hover a.thumbnail { opacity: 0.5; }
... which will target all of them, so you only need one rule to govern it, instead of many.
Here's the same fiddle updated with a class of .thumbnail:
http://jsfiddle.net/v6aNY/1/
I was wondering if there is a way using css or javascript that allows for a semi-transparent div element to appear visually on top of all other elements, but hyperlinks and other interactive elements under it can still be clicked? Just a whimsical idea to give my website the ability to darken or lighten the look of the website.
EDIT
I know that z-index moves objects from the background to the foreground but they also block interactive objects...
Such behavior possible via poiner-events:none (non-standard and not supported by IE).
Originally being an SVG feature, it's supported for any SVG element (IE 9+):
<svg poiner-events="none">
<rect width="100%" height="100%" fill="black" fill-opacity="0.5" />
</svg>
But for the effect you mentioned I would recommend to use opacity on body and some background on html:
body {
opacity: 0.5;
}
html {
background: black;
}
create another div element on top of existing div, and have it's z-index more than the existing one. Hope this should help.
Let's say I have a div, and that div should have a background-image:url(foobar.png). Also, however, foobar.png's opacity should be set to 40% so that the background image is translucent. How can I do this?
If this is not possible without JavaScript, is there an example script I can refer to? Something like this?
jQuery.fn.fadedBgImg = function(url, opacity) {
// Create block element that fills `this` element
// Set z-index of said element to lowest
// Set opacity of said element to 40%
// Insert said element into parent
}
Use CSS to set the opacity:
.translucent {
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
Edit:
Yes, opacity sets the opacity for the entire element, not just the content. To work around this, you can have the content overlay the background and wrap them both in a common parent:
<div id="container">
<div id="background" class="translucent"></div>
<div id="content"></div>
</div>
And use CSS like this:
#container {
position: relative;
width: 200px;
height: 200px;
}
#background, #content {
position: absolute;
top: 0;
left: 0;
}
I find this is the easiest method: In your graphics editor, set the transparency on foobar.png to 60% and save it as a 24 bit png file. If you need to serve this document to IE6 and don't want to use a png fix, this isn't a solution.
Otherwise, opacity in web browsers is such an annoying thing to deal with in terms of cross-browser support, and dealing with child elements becoming transparent is a typical issue as I recall.
Unfortunately I don't have any scripts that solve this handy.
edit: I see you edited, and I can tell you're not as unaware of what you're doing as I originally expected. Don't be offended if my advice seems a little elementary, haha.
Try this .. Little changes in the HTML structure .. and instead of using background image use normal image and set it backwards with low opacity.
.my_div{width:300px;height:300px;position:relative;}
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;}
.my_div div.back_image img {width: 100%; height:100%;}
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}
<div class="my_div">
<div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div>
<div class="front_text">
<h2>Testing Title</h2>
<p>Lorem Ipsum content testing.
This is Prakash Rao </p>
</div>
</div>
Try changing opacity with css:
opacity:0.4
While there's no direct support for setting background-image opacity, you can specify multiple background-image values, which are rendered with the first one closest to the viewer.
Thus, if you are for some strange reason unable to simply edit the opacity of the image in an image editor and serve up the modified image, you could try something like:
semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";
This example assumes you're generally rendering over a white page background; you may wish to change the color of the semitransparent image if you're trying to simulate semitransparency with some other color partially bleeding "through."
In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.
img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier
img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">