I've got a small problem.
I want to create an overlay effect on the picture in the following jsfiddle.
http://jsfiddle.net/39gud4bh/1/
<div>
<img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png">
<img src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png">
</img>
</div>
#bubble {
}
I want the overlay to have the color #ff9f2d
How is this possible? Been trying litterally everything i could find. The problem is that the image (might not be in jsfiddle) is a shape with a transparent background. This causes all my attempts to background/foreground filter the color to recolor the whole square instead of just the shape.
Really need some help.
In advance - Thank you!
EDIT - Fiddle has been updated to entail the desired outcome of the CSS on the grey bubble.
I don't think you can turn that yellow bubble into gray one with just css.
You could do that if you reversed transparent and colored parts, and filled whole square with color. Example: http://jsfiddle.net/Arministrator/j5gLgyt8/
#bubble_img{
background:yellow;
}
#bubble_img:hover{
background:#ff9f2d;
Or you can use two images (css sprites even better) as shown in one of the answers.
This may not be the exact answer you're looking for, but maybe you can consider using Font Awesome. It'll be a clean, sharp bubble and you can easily resize and color it anyway you want with CSS. Another route would be to use SVG.
http://jsfiddle.net/wilchow/39gud4bh/5/
.fa-bubble {
font-size: 140px;
color: #333333;
cursor: pointer;
}
.fa-bubble:hover {
color: #ff9f2d;
}
Just move the second image over the first and set opacity
#overlay {z-index:100;opacity:0.2;position:relative;left:-131px;top:-3px;
}
<div>
<img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png">
</img>
<img id="overlay" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png">
</div>
As far as I know there is no CSS property that will allow you change a gray colored image into a colored one.
However, the reverse is possible using CSS filters.
So if we reverse the 'process' and make the colored image appear grey by default we can remove that styling, perhaps on hover, to achieve the effect we are looking for.
#bubble {
-webkit-filter: grayscale(1) brightness(0.3);
}
#bubble:hover {
-webkit-filter: none
}
<div>
<img id="bubble" src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png" />
</div>
Jsfiddle Comparison
NOTE: CSS filters are highly experimental and browser support is poor.
This is an experimental technology
Because this technology's
specification has not stabilized, check the compatibility table for
the proper prefixes to use in various browsers. Also note that the
syntax and behavior of an experimental technology is subject to change
in future versions of browsers as the spec changes
MDN Reference
CanIUse.com Reference
Related
Using template engine as PUG
Html body
nav#navbar
ul.flex-container
div#logo
img(src='/static/logo3.png')
This is what image logo3.png looks
Can you suggest any css property?
Or photoshop tool to do it.
Searched but found opacity property which doesn't help.
You should use Google for more of these simplest tasks. This is not the right place to ask these type of questions. You can use an online background remover like https://remove.bg to remove backgrounds if you are not familiar with image editing apps. Btw, here's your updated image:
We can use background remover online tool as Vivek mention.
We can also do it by using css *Invert which changes white background to black. We can also use contrast and other property for it *Css filter function
#logo img{
filter: invert(1);
height: 50px;
width: 60px;
}
This is result of invert function
Thanks everyone who helped me in this!
Unfortunately this image is not transparent, you can see the gray and white chessboard pattern in the background.
I suggest you should use a photo editing app to select the content and delete everything other than the selection.
http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
It is quite popular question, I think.
I am looking for crossbrowser CSS solution for black opaque layer. Which will hide all stuff under it.
My example: http://jsfiddle.net/pb9jv/. But it is not crossbrowser. (IE 6+ is the pain in my ass).
Try adding this the the CSS style you apply to the fadeover (In your example : #black)
filter: alpha(opacity = 50);
EDIT : You want it to be opaque or transparent like the given example?
Have a look at this, it does work on IE 6
Use a simple div and apply a background-image to it with a 1px size image of your color. Just a simple png with your black color.
.overlay
{
background-image:url('myoverlaycolor.png');
}
It will repeat itself across the complete div.
Edit
Come to think of it, IE6 doesn't support png right? Maybe you could just take a look in sources like slimbox.
David is right - that is the syntax.
However your fiddle will not work in IE6 since you have no size values.
Here is an example:
http://jsfiddle.net/4Aw4Q/
If you remove the sizing the element will not show.
#Marnix If you use proper filters IE6 does support PNG. Try this for starters
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');
Set the above filter in as a class for the span or div element containing the image and make sure the width and the height of the image are set.
Set this class also for the span or div element containing the image.
.PNGTrans img{
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
So the above to classes will have to be called for the parent containing the png image.
#fl00r : Have a div element with higher z-index with screen.width and screen.height as its widht and height respectively. You can either use an image or you can play with opacity filters.
I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.
The current html looks like:
<h2>
<!--img src="images/greenback.gif"-->
<a id="site-title0" class="titletext" href="#">
Alligator Creek, Bowling Green Bay National Park
</a>
</h2>
<div id="descrip0" class='description'>
20km S of Townsville. $4.85/night. Gates close...
What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.
Or, maybe using CSS background-image is the best way?
As Daniel says, really:
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
background: #fff url(path/to/image.gif) top left no-repeat;
text-align: center;
line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.
Answer edited in response to timbo's comment.
Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html
You have to set the link to display: block
display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.