When I hover my background image I want another one to be displayed but keep the background one. Basically, I want an arrow to appear over the hovered image, but this is what I get: (see the bitly link below).
This is what it should look like: http://i44.tinypic.com/2vnm7au.jpg
http://bit.ly/18F2Cqd
Any suggestions?
You have errors in your CSS.
First, the background image is at another url than what you had. And you had background-image where you should have written background, the shorthand property.
After correcting these errors, I saw the background image was displayed 2 pixels lower than the original one, so I had to change the background position slightly to make the arrow appear in the same place.
background: url("http://oi44.tinypic.com/2vnm7au.jpg") 0 -2px no-repeat;
Corrected fiddle: http://jsfiddle.net/MrLister/vR7st/3/
I understand that you want to overlay an image over the background one; and that the overlayed image will be always the same.
In this case, the CSS would be:
.test {
position: absolute;
top: 8px;
left: 20px;
background: url("base.jpg");
width: 250px;
height: 200px;
}
.test:hover:after {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: url("overlay.png");
background-repeat: no-repeat;
}
The overlay file should have some transparent area, so that the base background can be seen.
fiddle
Related
I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the transition, or rather, while the animation is in progress. I've only found it to be an issue in Chrome.
In my example, while the div is transforming the blend-mode displays correctly over the image but not over the page background. Once the transition is complete it goes back to display as it should. In other words the blended div appears as solid yellow on the black background while the animation is ongoing but since it is set to darken it should be invisible over the black background. Once the animation is finished it appears as it should. It appears normal over the image.
I've tried this is Firefox and Safari and there seems to be no issue.
Pen: http://codepen.io/anon/pen/QGGVOX
Edit - I've found another instance where this occurring that doesn't involve any animation. Weirdly it happens when the position of one div is set to fixed while the other is absolute, see here: http://codepen.io/anon/pen/wooRME If the position of the div .image is changed to absolute then the blend-mode appears normal.
body {
background: #000;
}
.blend {
height: 650px;
width: 50%;
background-color: yellow;
mix-blend-mode: darken;
position: absolute;
opacity: 1;
left: 0;
top: 0px;
z-index: 100;
}
img {
position: relative;
z-index: 0;
}
So, I think I figured the problem. During the animation, it seems like the body doesn't count as an element, thus making the yellow appear at 1 opacity. I tested with other blend mode and it always appears yellow. (when set to 'difference the expected result would be white instead of yellow)
So the fix? just add a div with 100% sizes and a black background! Then, the yellow has something to blend in and doesn't show up.
Here's the code that worked in your pen:
html - added the bg div:
<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">
it's css:
.bg{
background: #000;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body {
background: #000;
width: 100%;
height: 100%;
margin: 0;
}
I also changed the body to fill the window so the margin weren't yellow too. Alternatively, the blend div could be sized in function of the body.
tagging #chrscblls since they wanted to know if you found anything.
EDIT :
For the other codepen the problem wasn't the same tho. They were trying to darken an image and a yellow rectangle onto a gray background.
If they didn't want the yellow to show on their gray background, the solution was simply to put the image inside a div and use ::after to blend in a color. Or even just make an empty div, give it the image as background and use the ::after.
this:
<div/>
with:
body {
background: #333;
}
div{
position:fixed;
width: 500px;
height: 500px;
top:50px;
left: 50px;
mix-blend-mode: darken;
background-image: url("http://lorempixel.com/500/500/");
}
div::after {
content: "";
height: 100%;
width: 100%;
background-color: yellow;
mix-blend-mode: darken;
position:absolute;
opacity: 1;
left: 0;
top: 0;
}
or this:
<div><img src="http://lorempixel.com/500/500/"></div>
without the 'background-image' in the div css.
http://html5up.net/big-picture
The overlay.png does make my background brighter. But I do not want to deleted it unless I understand what this png does. Do you guys have a clue?
The overlay.png is used here:
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px cover;
background-attachment: fixed, fixed;
background-position: top left, top center;
background-repeat: repeat, no-repeat;
color: #c2b090;
}
.image:before
{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('images/overlay.png');
}
It's making your background image lighter. overlay.png is a partially transparent blue-ish graphic that overlays intro.jpg. It's set as the first background image of your main section tags. If you delete it, your big images will not be washed out, but it will result in a failed HTTP request because your CSS is still referencing it. If you want to delete the image, you should remove reference to it in your style.css file if you can.
I am attempting to make a sidebar for a tumblr page have a curved header and the rest of the sidebar be squared with 100% height so it flows off the "page" with no visible footer. I have layered backgrounds and as you might expect the square background with current coding is going to show at the top of the curve removing the transparent affect I want at the top.
This is the live preview.
Here is the coding used for those side bars:
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'),
url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: no-repeat, repeat-y;
background-color: #b8a6a5;
position: absolute;
min-height: 100%;
top: 0px;
width: 345px; }
Is there a way of accomplishing my goal without making a separate div for the top of each side?
To get this to work, you need to use the :before selector:
#left:before, #right:before{
height: 100px;
width: 345px;
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png');
position: absolute;
top: -100px;
content: " ";
}
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
top: 100px;
width: 345px;
}
Note that I've bumped down the main divs with top: 100px;, bumped up the :before part with top: -100px;, and moved the header background image to the :before.
Oki doki the best way for you to do this would be to use the css style background-position.
For example
img {
background-position :-10px 0px;
}
The above with offset the image by - 10px to the left and 0px to the top.
I hope that helps!
Is this even possible?
I have a box and want to add one background image over the other. But i want to add an opacity 0.5 just
for the top image.
You can do it with pseudo element:
#example1 {
position: relative;
width: 500px;
height: 250px;
background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}
#example1:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
opacity: .7;
z-index: 10;
width: 100px;
height: 100px;
background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
}
http://jsfiddle.net/Let8U/
Check out: http://www.css3.info/preview/multiple-backgrounds/ It would help somewhat.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
As you can see in the example given, there are two images - one center bottom and the other top left. For Opacity, I would do that in the image editor if I wanted to layer backgrounds.
There's no way to change a background-image's opacity.
What you can do is add an extra element with the desired opacity and background on top of your box.
This snippet on CSS-Tricks shows an elegant way of doing this with pseudo-elements, so you don't need to clutter your markup to achieve the effect: Transparent Background Images
Hope it helps.
I will give an example: Consider you have a div with an image for a background, you hover over it and some colour is added to the image, much like a filter, however it is a single colour (transparent as well so you can still see the original image. The filters in css3, atleast these which I have seen ( http://html5-demos.appspot.com/static/css/filters/index.html ) do not offer single color manipulation. Is such a thing achievable?
Things I have considered adding an element on top of the div (z index) and have a transparent background with some color appear on it when it is hovered on, but I wonder if it is possible with css3.
You can do something like this:
#the-div {
width: 500px;
height: 500px;
background: url(http://placekitten.com/500/500) no-repeat center center;
position: relative;
}
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
See it in jsFiddle.