Well, i have to ask something complicated before i even start. I have a website on which there are facial images of workers. All images have rounded corners. I thought about idea that i can export image with fake rounded corners and opaque inside so photo of worker which is beneath can fit in.
Is there some way to do that?
In case you really need to put an image on top of the other one, just use the z-index property:
<img src="border.png" alt="" style="position: absolute; z-index: 1;" />
<img src="worker_photo.png" alt="" />
In this case, the image "border.png" will show up over the "worker_photo.png". If they have the same size, it will look exactly like what you want. But for rounded corners the previous reply is better. :)
There are some ways of preforming what you want.
you could use a div with width and height set, and then apply the rounded corners image on it.
You could just use the border-radius property which has a very good modern browser support (with vendor prefixes), example:
img.employee {
border-radius: 10px;
}
Good luck ;)
Related
I've been searching for some CSS or jQuery that will achieve a translucent effect. Most of what I've seen are people using translucent as a synonym for transparent, and that's not really accurate or what I'm trying to get.
I would like a box and when this box passes over objects, it distorts the objects underneath. Think a bathroom window. It allows light to pass through, but not a clear picture. I've attached an image showing what I want to achieve.
My thinking is I would apply this effect on the top image (the white box in the sample image) but it might possibly be something else. Also, I'm pretty sure this will be javascript but I'm including CSS as an option in case there's something out there I didn't know could produce this type of thing.
Just use a transparent PNG, especially if you need a texture like your example.
Otherwise you can set the opacity of the inner div to some value < 1
As been suggested:
If you only need the effect to appear over an image (and not on top of html text etc.)
The number of images the effect should appear over is limited
Then you could prepare an alternate version of each image with the translucent effect applied, then use the alternate image inside the effect box as background image, where the background-position is calculated based on the box position.
Or you could look into this more complicated way: http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript
There is an alternative to the opacity or translucent image solutions listed in the other answers. You could try using a CSS3 filter with blur effect:
img {
-webkit-filter: blur(10px);
filter: blur(10px);
}
Please note however, that this is still in the experimental phase and subject to change. It also may note be supported by all browser vendors. For a list of compatible browsers, check here.
This list from CanIUse may also be helpful for you to look at.
In addition, here is another good resource on CSS Filters.
Looks like a good candidate is the jQuery Blur plugin. Seems to do exactly what I'm looking for. Thanks for everyone's suggestions.
http://www.blurjs.com/
An extention of the idea proposed by #Dryden Long
Here is a working Example: jsFiddle
You can create a translucent version of the image in GIMP/photoshop. Then set the css background property of the child div to fixed:
.parent-div {
position:relative;
background: url(normal.png) no-repeat 0 0 ;
}
.child-div {
width: 100px;
height:100px;
background: url(distorted.png) no-repeat <X> <Y> ; /* x y relative to the parent*/
background-attachment:fixed;
}
I'm building a site where most of the images go full-bleed, that is, they are width:100%. I am having a problem where the images have a height of 0 until loaded which causes the elements of site to jump around a lot.
I can't leave it blank because it is 0 until after loading.
If I set the height to a pixel value, it doesn't scale correctly.
I can't really set it to 100% because that uses the height of the
containing element.
Is what I'm trying to do possible? I can think of ways to possibly solve this using javascript after the first image loads, but doesn't seem very elegant.
Help!
<img src="http://lorempixel.com/1280/640/cats/1" id="auto" />
<p>This text will get pushed down after load starts</p>
<img src="http://lorempixel.com/1280/640/cats/2" id="fixed" />
<p>This text will get pushed down after load starts</p>
<img src="http://lorempixel.com/1280/640/cats/3" id="percentage" />
<p>This text will get pushed down after load starts</p>
img { width:100%; }
#auto { height: auto; }
#fixed { height: 640px; }
#percentage { height: 100%; }
JSFiddle
The best you could do is have a wrapper div element which is fluid in the sense that it matches image's aspect ratio.
Like below:
HTML
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/1" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/2" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/3" />
</div>
<p>This text will get pushed down after load starts</p>
CSS
.image-wrapper {
position:relative;
height:0;
padding-bottom:50%; /* aspect ratio of the image ( ( 640 / 1280 ) * 100% ; ) */
}
.image-wrapper > img {
position:absolute;
top:0;
left:0;
width:100%;
}
Fiddle: http://jsfiddle.net/Varinder/m8dFM/1/
If the browser hasn't downloaded the image yet, and you haven't specified the height of image in the img tag, then it has no way of knowing what height to reserve for it in the page.
The best you might be able to do is set a safe min-height on these images to at least minimise the 'pop' when they load.
There are no solutions, here.
There are potential answers, though.
If you loaded a JSON payload of information about each image, and used document.body.getBoundingClientRect().width, then you could use the body's width (or your container's), and the metadata about the image, to reserve that much height.
Of course, you'd have to load that JSON as one of the first things you did on the site (or bake it into the page, or save it as a JS object, in an included file), and you'd have to save the data for every image you intended to use...
...also, rather than showing nothing, you could then show an SVG (which could either stretch non-uniformly, or could be scaled and letterboxed), which, on-load of your intended image (which would be loaded in JS), you could then set the position of the SVG to absolute (at the same point in the page), and start fading it into the background, while crossfading in your image, which would be appended to the DOM, in the space the SVG was occupying...
Or rather than "pop" in, you could have them all slide in, or zoom in... ...or if you wanted to be really annoying, zoom-out...
It might be overkill for something you consider to be a simple problem... ...and it really probably is.
The sad truth is that there are no solutions, but the happy reality is that you can solve slightly-different problems to make the initial problem seem novel.
I am using image slider specified at: here
My images are of different sizes and I want to set the width and height of the image using following code:
<img src='77.png' width="20px" height="20px" />
But this doesnt work.
I am preety new to javascript, any help will be greatly approciated!
I really don't think this code can handle it (perhaps with a very serious overhaul of the javascript). I set up a fiddle here: http://jsfiddle.net/JLjCP/9/ and in examining what it is doing, it simply does not care what size the image itself is nor does it care if you have resized the image explicitly through the width and height properties. It is only taking the referenced image file and using it as a repositioned background image for the split components which are purely sized by the width and height of the display and the number of sections you tell it to do it in.
So the short answer is this code will not do what you want it to do.
put this in your css :
.cs-coin-slider
{
/*i think the class name is depend on what you set*/
-o-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
-khtml-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
}
if you insist to use this coin-slider, no matter you set the size in html or set the css width+height of the image, it wont resized because this plugin treats the image as background..and that css3 background resize that is the only way that save you :)
The documentation on that page says that you can pass size options to the constructor:
$('#coin-slider').coinslider({ width: 20, height: 20 });
If you have different sized images in the same slideshow and you want to change the slider's size dynamically, it might not be possible. Use same sized images or tweak the CSS so that you get black bars around smaller images or something to that effect.
Please post your complete HTML/JS source code, the image size shouldn't matter as long as they are the same height/width as the container of the slideshow. Chances are you are possibly calling the plugin in the wrong way in your JS.
I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!
I can't recall what the process is called but I need a means of creating like a hotspot zone on a web page, so that, when the user hovers there mouse pointer over this zone, the cursor changes to a pointer, which will then allow the user to go to a particular site.
Please note that I am not referring to a simple anchor tag around an image, I am specifically after a means of determining coordinates on a web page which will then turn this area into a hover zone.
A very simple solution is to position an anchor tag to a specific point on the page.
<a id="hotspot" href="#!link">hidden hotspot</a>
#hotspot {
position: absolute;
width: 100px;
height: 100px;
background: transparent;
display: block;
top: Xpx;
left: Xpx;
text-indent: -10000px;
}
Sounds like a simple anchor that is absolutely positioned
Although I'd recommend the absolutely positioned links as mentioned above, it sounds like you're looking for an image map.
Others have suggested positioned anchor tags, but since you mention coordinates, it almost sounds like you're looking for an old-school imagemap. It's ancient, but if you want some arbitrary shapes, maybe it's an option. Remember these?
<img src="yourpic.png" width="500" height="400" usemap="#themap">
<map name="themap">
<area shape="polygon" coords="0,0,100,0,100,100,0,100" href="..." id="foo" />
<area shape="circle" coords="150,30" href="..." id="bar" />
</map>
I don't know the specifics of your requirement, but maybe you could throw something together with a big blank image, define a bunch of polygons and/or circles, add some hover behaviors to each area, and go from there.