In my application I am making use of the :before for an image background. This is to "sharpen" the image that's in the container, as it's using a -webkit-filter: blur().
The issue is that I cannot find a way to change the :before style using Javascript. I need to change the background image to be whatever the foreground image is.
Example CSS:
#image-container:before {
background: url(img.png);
content: '';
position: fixed;
z-index: -1;
display: block;
height: 40%;
}
#image-container {
position: relative;
width: 100%;
height: 58%;
overflow: hidden;
}
.blur {
-webkit-filter: blur(10px);
}
Inside the image container I have the following code:
<div id="image-container">
<img class="blur" src="img.png" width="100%" height="100%">
</div>
The issue is that the img source is actually coming in from my server, so I need the background to match up with the image so the edges (from the blur) don't look sloppy and conflicted.
So the question here is, how can I change the background: url() value on the #image-container:before CSS style?
No libraries. Pure Javascript.
Try below code. For the reference -
http://davidwalsh.name/pseudo-element
http://pankajparashar.com/posts/modify-pseudo-elements-css/
Your css is like this
#image-container:before {
background: url(img.png);
content: '';
position: fixed;
z-index: -1;
display: block;
height: 40%;
}
Below is js to get background
var color = window.getComputedStyle(
document.querySelector('#image-container'), ':before'
).getPropertyValue('color')
And to set the new css property
var style = document.createElement("style");
// Append the style tag to head
document.head.appendChild(style);
// Grab the stylesheet object
sheet = style.sheet
// Use addRule or insertRule to inject styles
sheet.addRule('#image-container::before','color: green');
sheet.insertRule('#image-container::before { color: green }', 0);
Related
Im working on a project and a part of it is making an image disapear on hover, and replace that with text in the same location! I have to do it through javascript.
im very new to front end web development so any help would be great!
.main-img1{
height: 400px;
width: 600px;
margin-top: 80px;
background-size: 600px 400px;
box-shadow: 10px 10px 5px rgb(24, 22, 22);
position: relative;
text-align: center;
font-size: 25px;
color: black;
border-radius: 50px;
}
.img1-text{
display: none;
position: absolute;
bottom: 8px;
left: 150px;
<section class="main-body">
<div>
<img class="main-img1" src="img/automotive.jpg">
<h1 class="img1-text" id="img1text"> Here are some samples of my automotive photography! I specialize in "Rolling Shots" which are caputring a vehicle in motion, while the background and foreground show the motion.</h1>
</div>
You can replace any element using the "magical" outerHTML like this...
First, I gave your image an ID to make javascript operations easier...
<img id="I" class="main-img1" src="img/automotive.jpg">
Now replace the image with a paragraph of text...
I.outerHTML='<p>Well what do you know!</p>';
For easy one-line HTML...
<img onmouseover="this.outerHTML='<p>Well what do you know!</p>';" class="main-img1" src="img/automotive.jpg">
First off, this is a very odd thing to do in Javascript. Usually hover states, appearing and disappearing, etc. are handled by CSS.
to do it in js you have to add a mouseover event listener to the image to execute a function to grab the element you want to disappear, add a css class to apply "display: none" to it, grab the element you want to appear and remove a class that adds "display: none" from it.
assuming you have a 'display-none' class on your text element that applies 'display: none' to it, you can do this:
const image = document.querySelector('.main-image1')
const text = document.querySelector('.img1-text')
image.addEventListener('mouseover', () => {
image.classList.add('display-none')
text.classList.remove('display-none')
}
if you were to do this with css its as simple as
.image {
z-index: 2;
}
.image:hover {
display: none;
}
.text {
z-index: 1;
}
that way the text is set behind the image and when you hover over the image it disappears. This also has the benefit of when you take your cursor off the image for the image to reappear where js will need to be told explicitly to do that.
I have a web application that has a draggable div I need to print when the user selects print from the web browser.
The most succinct advice I found so far is this stack overflow answer, where it is suggested I make my page invisible and display #plotArea only for #media print like so:
#media print {
body * {
visibility: hidden;
}
#plotArea, #plotArea * {
visibility: visible;
}
#plotArea {
/* this positioning ignores .draggable() divs */
position: absolute;
left: 0;
top: 0;
}
}
However, because this div is draggable, I cannot for the life of me remove the offset such that the div positions itself properly for printing. Is it possible to temporarily remove the offset somehow for a draggable div? Below is the div's jquery / css
//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});
/* css */
#plotArea {
background-color: #FFFFFF;
width: 42em;
height: 54.5em;
float:left;
font-size: 12pt;
overflow:hidden;
}
So what you are saying is that the draggable plugin is applying inline styling to your #plotArea div and therefore overwrites the positioning css you add to it with your print media query?
What you need to do is reset it's positional values for top/left, etc to auto and use the !important rule overwrite to overwrite the inline styles applied to it via the javascript plugin.
For example;
#media print {
#plotArea {
left: auto !important;
top: auto !important;
}
}
I'm using two iframe tag in my website.
I added css for 1 tag
<style>
iframe{
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 300px;
left: 200px;
height: 300px;
width: 250px;
filter:alpha(opacity=0);
}
</style>
But both iframes are hidden.
I want to show 1 iframe and hide another one. How can I do that?
You can use IDs for this if you have a simple page and don't have too many styles to maintain. Below the style tags are the iframes with ID attributes defined. Those ID attributes are used between the style tags to select the iframe element you want to style by ID.
<style>
/* Using ID selector #iframeOne */
#iframeOne {
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 300px;
left: 200px;
height: 300px;
width: 250px;
filter:alpha(opacity=0);
}
</style>
<!-- Give ID to iframe you want to style. Here it's iframeOne -->
<iframe id="iframeOne"></iframe>
<iframe id="iframeTwo"></iframe>
Try these selectors:
iframe:first-child{
// styling
}
iframe:last-child{
// styling
}
iframe:nth-child(1){
// styling
}
You should add ID or Class in your <iframe> tag like below code:
Add ID:
<iframe id="iframe-1"></iframe>
<iframe id="iframe-2"></iframe>
or
Add Class:
<iframe class="iframe-1"></iframe>
<iframe class="iframe-2"></iframe>
Below CSS:
<style>
#iframe-1,
.iframe-1 {
/* Your code here */
}
#iframe-2,
.iframe-2 {
/* Your code here */
}
</style>
The best way is to give the one you wish to hide an id or a class and then let the css be applied to the id (#your_id) or the class (.your_class). So instead of writing iframe{.... you would write #your_id{... or .your_class{....
I have something like
<a href="OnlyThisONE"
<img class="SameClassForAllIMG" src="random.png">
</a>
I would like to replace the image which something else using only CSS. Is this possible?
Here is the Javascript solution.
var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
if (images[i].src == "random.png")
images[i].src = 'new.png';
}
Here is a possible CSS solution
.SameClassForAllIMG {
background: url(new.png) no-repeat;
}
The issue is the CSS should do it for the IMG only under the "OnlyThisONE" href, and not all of them. Is this possible using only CSS?
This is possible using only CSS. You can target the image using a[href='OnlyThisONE'] and hide the <img> tag within, then apply a background to the <a> link.
CSS
a[href='OnlyThisONE'] img {
display: none;
}
a[href='OnlyThisONE'] {
background: url('somebackground.jpg');
width: 100px;
height: 100px;
display: block;
}
In CSS you could use either pseudo-element on <a> or a background-image in <a> or even in <img> that can only be seen on hover.
here is 2 demo
one using a pseudo-element
one using the img tag with a background. (no src changed).
http://codepen.io/anon/pen/Jchjw
<p>Set background-image, and resize it to zero with padding on :hover
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1">
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>
img {
vertical-align:middle;
}
[href="#nature"]:hover .a-img {
height:0;
width:0;
padding:40px 60px;
background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
display:inline-block;
vertical-align:middle;
position:relative;
overflow:hidden;
}
[href="#nature3"]:after {
content:url(http://lorempixel.com/120/80/nature/4);
vertical-align:top;
position:absolute;
}
[href="#nature3"]:hover:after {
left:0;
}
The a:hover + img background works with oldest IE an it keeps the alt attribute useful, this would be my choice. pseudo-element :after/:before works from IE8, but not the ::*after/::*before syntaxe.
theres in css of course, many other solution working with a or img with or without a translucide gif/png :( ....
There are a few approaches you could use. In my opinion, the best one is #1, as it has the broadest browser support and it avoids the use of JS.
1 - You could select just that a (assuming the href is unique), show a background image, and then hide the contained image. You'll also need to specify width, height, anddisplayon thea`:
a[href$='OnlyThisONE'] img {
display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
background: url(someOtherImage.jpg) /* show another image as a background */
display: inline-block;
height: 100px;
width: 100px;
}
2 - Use content:url(), but it doesn't have broad browser support
- Is it possible to set the equivalent of a src attribute of an img tag in CSS? After running a quick self-check on support of content:url() I would not suggest doing this, at all. I could only get it to work in Chrome. Try it yourself: http://jsfiddle.net/3BRN7/49/
a[href$='OnlyThisONE'] img {
content:url("newImage.jpg");
}
3 - Use JavaScript as you have in your question.
If the src is "random.png", "new.png" will be displayed.
HTML
<a href="#">
<img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
<span></span>
</a>
<a href="#">
<img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
<span></span>
</a>
CSS
img.SameClassForAllIMG[src*="random.png"] {
display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
display: inline-block;
width: 300px;
height: 100px;
background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}
I guess that this code is the same as your JavaScript solution.
IE7>= version http://jsfiddle.net/nxvm7/1/
IE8>= version http://jsfiddle.net/nxvm7/2/
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}