This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Blur Img's & Div's in HTML using CSS
So basically what I want to do is to blur content witch is behind a div element, that div is with opacity 0 - 0.5.
Here is a jsFiddle
EDIT[1]: What I actually want is that a div goes over an image and the area under the div is blured.
EDIT[2]: div with position: absolute goes over other elements and blur's them.
You should blur image on upload. Then crop other image on upload (or crop it using jQuery/css). Then combine what you have to achieve this effect.
Using css for this task is impossible. Using javascript for this task is bad idea (very slow).
Only option is to use this technique on background image and then place another (cropped with js/upload) ontop of it.
Following up on the answer by Purmou referenced in the comment by #Keith Nicholas, you could do something like:
topblur{
position: absolute;
top:2px;
left:2px;
width: 100%;
height: 150px;
background-image:url(http://www.stefanides.com/home/yard/back%20yard.jpg);
opacity: 40;
filter:alpha(opacity=40);
border: thin solid black;
}
Not a great solution, but it does mess the image up!
Related
This question already has an answer here:
Change image width by screen size
(1 answer)
Closed 2 years ago.
I tried to solve the problem by myself, but I don't know.
When the width of the screen decreases or expands,
how can I reduce or increase the width of the image in JS?
I had an image in a table and in order to have it adapt to the table I used this class in my css :
.img-fluid {
max-width: 100%;
height: auto;
}
It would be much easier to make the image resize with the window in css rather than js.
If your image looks something like this:
<div class="Somediv">
<img src="somesource" class="Someimage"></img>
</div>
Your css can look like this:
.Somediv {
width: 50%; //the div will take up 50% of the parent element. You can use 50vw to scale by the width of the window
}
.Someimg {
display: block;
width: 100%;
}
If you really want to do it through JS here is the official documentation on element.classList which will help you do what your trying to do.
You don't need Javascript to do this. This can be done through CSS only, You need to set image width to 100% to make it responsive on browser window resize. when you resize your browser window it will automatically takes height according to image width in same aspect ratio.
you need to write a css code like this:
img.img-responsive {
width: 100%;
}
I need to make a see-through window when user click in a given position of the screen, something like this:
It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.
I have two options:
Use a plugin to take screenshots (like these).
Create 4 grayed boxes.
I don't like none of these options for different reasons:
The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
Manage these boxes may be complex in a future and browser compatibility may be an issue.
So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.
I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:
Create a div in the location you want, set height and width (for window effect);
position the div in the place you wish and then just add outline to it.
body {
background-image: url(http://lorempixel.com/800/800/nature/5/);
background-size: cover;
}
.windowDiv {
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 300px;
outline: 4000px solid rgba(0, 0, 0, 0.5);
}
<div class="windowDiv"></div>
EDIT: use background-color rather than opacity.
2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.
I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>
I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?
Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.
You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}
Is it possible that we can write text on image using html or javascript.
I have done this
Created an em tag and create spans inside it and now we can write any text in spans and adjust the position of em tag such that it appears over image. Set the z-index of em tag to be larger value then image. Then it appears that text is written over image.
But I want to provide option using which a visitor can edit the text. How i can do it ?
Code Sample:-
$("#em1").html("<p><span>Hi I am</span><br>
<span> Trying to </span><br><br>
<span> To write text</span></p>");
#em1{
display: block;
/*border: 1px solid black;*/
position: absolute;
top: 160px;
right: 145px;
z-index : 10;
}
I am using a background (blank-nothing written on it) image
Set the contenteditable attribute on the em element. You probably need to inform users about the edibility, as people don’t normally expect it, and there is nothing in the visual appearance that suggests it.
You can have a textarea
<textarea class='abc' >Hello Boys</textarea>
with some css applied to it.
.abc{
background: url('http://www.bzfusion.net/skymaps/sky_englishspring.jpg') no-repeat;
background-color:red;
width:300px;
height:500px;
}
A good practice for this kind of feature is that drawing is done on server side. If you really need to draw on client, use HTML5 canvas.
If you will need to save that image, read this article:
http://www.nihilogic.dk/labs/canvas2image/