I want to achieve this functionality as shown in image.
Image on left is orignal and when I hover over that image, Some color defined by us should overlay image as shown in Right. I have tried using CSS no use. I was trying to achieve this thru SVGs, but I am not much experienced in it. Is there any method which can be used to achieve this effect.
UPDATE
I don't want to use any extra image on hover.
I may be able to select any other color instead of black on hover.
This is possible with webkit-filter.
Please try for not hovered image:
img {
-webkit-filter: contrast(10) grayscale(1);
}
And then drop all filters on hovered:
img:hover {
-webkit-filter: none;
}
What you have to know, NOT ALL browsers supports -webkit-filter. Also its nice idea to check this page. It will help you with finding correct values.
use can use two Images on hover u can show second image and hide first image.similarly u can do this with second image
propose here is a solution using sprites demo
<div class="picture-hover"></div>
.picture-hover {
background: url(http://i.stack.imgur.com/55veX.png);
width: 239px;
height: 180px;
}
.picture-hover:hover {
background: url(http://i.stack.imgur.com/55veX.png);
width: 239px;
height: 180px;
background-position: -239px 0px;
}
Related
body
{
background-image:url("hamburger.jpg"),url("glitter.png");
background-blend-mode:color-dodge;
filter:blur(5px);
}
I've added two background images,a main jpg image and another png image with glitter effect. I'm trying to blend them using color-dodge, but the glitter dominates. Also,I need to blur the glittering? I tried blurring the image, but only the text gets blurred.
I'm totally getting what you want to achieve here. Yes, you can stack one background-image over the other, either by making use of two separate elements or with the help of a pseudo-element.
With that being said, you won't be able to bring about the effect you are looking for. Why? Because on blurring the image, you are blurring the whole image, not the specific sparkle particles present in the bitmap (there is no way you could do that). Blurring of the whole image creates a misty-kinda effect and I guess it is not what you might be looking for.
I played a bit with some images, stacked them up one over the other, adjusted opacity and filter, and below is what I came up with; see if that helps.
.effect {
position: relative;
height: 100vh;
width: 100vw;
background-image: url("https://unsplash.it/700/400?image=411");
display: flex;
justify-content: center;
align-items: center;
}
.effect:after {
position: absolute;
z-index: 2000;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0249/0963/rrrrSparkle_silver_mirror.png") 0 0 no-repeat / cover;
content: "";
filter: blur(3px);
opacity: .35;
}
.effect-inner {
position: relative;
z-index: 3000;
}
<div class="effect">
<div class="effect-inner">
<h2>CSS is fun!</h2>
</div>
</div>
If you are looking for more, you definitely need a JavaScript solution as CSS is not going to help much here.
You forgot to specify which language you want, JavaScript, CSS or HTML. For CSS you want the code in, but for CSS just type in:
.Background Image {
filter: blur(20px);
}
That is way easier. But if you are using color blend, then you will need to blur the bigger image
You can also do many other things with filer, for example you can edit the contrast and shadow. If you want to learn more about filter go to this website:
Learn More
If you are asking about HTML or JavaScript, then comment, becouse you didn't write it in the "question's description".
I use a p:rating tag like this.
<p:rating id="ratingID" value="#{manageBean.clientDetails.level}" styleClass="rating"/>
I want to change the image instead of star. I surfed google and got the below code.
.rating .ui-rating-star a, .ui-rating-cancel a {
background-image:url(../Images/fire.jpg);
display: block;
height: 15px;
width: 16px;
}
But it is not working for me.
Is their any other way for this?
I was able to change the "on" (the yellow star) image using this:
.rating .ui-rating-star-on a{
background-image: url("#{resource['images:new-document.png']}") !important;
display: block;
height: 15px;
width: 16px;
background-position: center;
}
If you want to change also the other images would be more tricky. Apparently checking the example in the Primefaces showcase website I can see this is what they are using:
I think if you would just create the same image picture as that and following the size (16X80) as well then replace the pictures accordingly, you can achieve achieve your desired effect.
Haven't tried it though on my end.
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I'm helping a friend with this site:
http://smashingdivas.info/
No matter what style I apply to the gray background of the content div, I can't make it transparent (in any browser), so that the background image of the page shows through.
I've tried all of the following:
background-color: transparent;
background: transparent;
background-color: none;
background: none;
and nothing seems to work.
Thanks for your help!
If it's the div with class 'container' it's because you have a rule in your HTML that is overwriting your CSS:
.container,
.sliderGallery { background-color: #111111; }
If you want to apply transparency just on the background there are 2 options:
1) you can set the "alpha" channel on RGB ie.
background:rgba(255,255,255,0.5)
but this won't work on IE
2) create a simple transparent png image and set it this way
background:url(transparentIMG.png) repeat;
Have you tried applying the opacity property ?
like for eg.
opacity:0.5;
Works for me, at least. I guess you're overriding the background properties via CSS due to some later rule again.
Just remove following rule:
.container, .sliderGallery {
background-color: #111111;
}
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.