I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:
http://www.nightlylabs.com/uploads/test.html
So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.
Any help? This method is bad so if anyone has a better one please comment.
I used the following css and its fine.
#container { position:relative; width:184px; height:219px;}
.image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
.overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
.top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
.top-image:hover { background-image:none;}
The image flickers because you can't hover over something that isn't there.
It will work if you have it layered normally (no z-index necessary) and make it transparent, so that it is still being displayed and can be hovered over.
The second image won't flicker, and you can control the styling with the span tag. Here's some of the CSS I used:
img.side
{position:absolute;
border:1px solid black;
padding:5px 5px 5px 5px;
float:center;}
/*normal base images*/
img:hover+span
{display:block;}
/*new images. automatically display beneath base/hover image*/
.side:hover
{opacity:0;}
/*base images again, only when hovered over*/
span
{display:none;
cursor:pointer;}
The hover tag determines the styling of the base img (and base div), and hover+span defines the styling of the img that only appears when hovering.
Here is the html showing the div entirely:
<div class="only" id="one">
<img class="side" id="ach" src="ach.svg">Academic</a>
<span>
<img class="hovering" id="hach" src="Hach.svg">Academic</a>
</span>
</div>
Hope this helps.
Related
Example image demonstrating what I need
If you see the image above, There is a parent container that has a background image applied which is a gradient. It is divided into 2 subdivs stacked vertically. one of those divs contains a red div and a blue div that are absolutely positioned. The blue div is supposed to act like a mask that covers the contents only of subdiv2. It is anchored to something else in subdiv2 (not in image) so it moves if that "something" moves. If it happens to cover the red div, it's supposed to hide the red div while retaining the gradient background.Is there a way to achieve this using css ?
If the gradient didn't exist, One would inherit background color down the chain and the blue div would simply hide the red div. If you inherit the background-image, we get a split gradient in the 2 subdivs which is not correct. If we keep the backgrounds of the 2 subdivs transparent, I know of no way for the blue div to hide the red div.
Thanks!
EDIT : Sorry for not specifying earlier. My bad. I've changed the wording to ensure you guys understand the fact that the blue div doesn't ALWAYS cover the red div otherwise the solution would be simple.
You can check this example out.
You can use
background: inherit
on the blue div after setting the z-index of the red div as -1.
Using background inherit on the blue div will help it in not loosing transparency and will vanish the red div.
And using z-index:-1 on red div will push it behind the blue div.
If the parent div has background:transparent, it will give you the desired effect. The tough part is getting the parent "in front of" the child. I was able to do it by setting a negative z-index on the child, but you might require something else. Without seeing your markup I can't be sure.
document.getElementById('toggle').onclick = () => {
const inner = document.getElementById('inner');
const style = window.getComputedStyle(inner);
const index = style.getPropertyValue('z-index');
document.getElementById('inner').style.zIndex = index === "-1" ? "0" : "-1";
}
.bg {
width:600px;
height:400px;
background:url(http://placekitten.com/600/400);
}
.div1 {
height:200px;
border: 2px solid red;
}
.div2 {
position:relative;
}
.subdiv2 {
position:absolute;
left:40%;
top:80px;
height:80px;
width:200px;
border: 2px solid blue;
background:transparent;
}
#inner {
position:absolute;
top:10px;
left:80px;
width:60px;
height:60px;
background:red;
z-index:-1;
}
<div class="bg">
<div class="div1"></div>
<div class="div2">
<div class="subdiv2">
<div id="inner"></div>
</div>
</div>
</div>
<button id="toggle">toggle z-index</button>
z-index seems like a bad solution to this problem. You CAN animate the z-index value BUT it's still going to look kinda funny as the elements change depth and pass between each other.
If the goal is to visually "hide" content with its parent background, isn't transparency the same result? Or am I missing something about the goal?
I would suggest:
// hidden state
.redDiv {
opacity:0;
transition: opacity 0.5s linear;
}
// visible state
.redDiv.visibleState {
opacity:1;
}
You can do real masking in CSS but I tend to reserve that for complex shapes.
I am trying an animation in which you click the button, and it fill up with the color from bottom to top. When you click it, the element with position absolute changes and goes up the box.
Demo (after clicking the element, try resizing your window and see the problem)
Before animation the css is:
#boton_auto {border-bottom: 5px solid #2dbbdc;}
After animation (80px is the height of the box):
#boton_auto {border-bottom: 80px solid #2dbbdc;}
I know I could use top:0px; but I need the elements to be align baseline with other buttons. Am I clear?
Thanks for any help!
To start in your fiddle you are not calling properly the svg class (you are missing the dot. You wrote "svg" insteed of ".svg".
And I woudn't use border to achieve your efect. If you are looking for a full responsive image as the width 28% may indicate I would insteed use a full absolute container which will grow (vertically) on click:
.blue {
height:4px;
position:absolute;
bottom:0px;
width:100%;
background-color:#2dbbdc;
z-index:-1;
}
then you won't have problems with the span (the AUTO text), going to the top.
I've made this fiddle for you
If i understand the question correctly You could use position: relative; and then describe how far away from the bottom of the button you want. Ex:
*if you want 80 pixels you could just add them. Start + finish.
this is for the bottom (before animation)
# boton_auto {position:relative;
border-bottom: +85px solid #2dbbdc;}
this is for the top (for after animation)
# boton_auto {position:relative;
border-bottom: +5px solid. #2dbbdc;}
This is my html code
<div class="feature-image">
<a class="featured_image_link" href="#">
<img src="1.jpg">
</a>
</div>
My image 1.jpg size is 150px x 150px and i have mentioned in the css as
.feature-image{
width:150px;
height:150px;
display:block;
position:relative;
overflow:hidden;
}
.feature-image img{
position:absolute;
top:-50;
left:0;
width:100%;
}
I know that when i give different image size (for eg: 300x200 or 600x350 etc) the image will fill inside that 150x150 and not stretches.
But actually its not working properly. Please help whether there is any mistake in this code?
Ok. Let me explain how this work.
First things first. Your CSS has a bug.
top:-50;
This wont do anything. It has to be something like
top:-50px;
But my question is why do you want negative margins? it will only hide you image by 50 pixels on the top side.
Ok, now coming to the real issue. You say you have no problems when your Image is 150X150 pixels. Thats because the parent <div> is 150x150. But if you have a different image size like 300x200 you have a problem.
This happens because in your CSS you have only mentioned width: 100% for the image.From here on its plain math.
The width=300 & height =200
Since you have mentioned width:100% the image automatically gets adjusted to the new width
300(original width)/150(new width)=2
So taking the same factor of 2
200(original height)/2=100(new height)
Hence you rendered image will have height of 100px.
if you want the rendered image to have same height of div just add this line to img CSS
height: 100%;
Working fiddle
from the code you have pasted, it's working properly. Are you able to link to the site where this is live and not working? Cache issue?
See jsfiddle: http://jsfiddle.net/FNQZn/
.feature-image {
width:150px;
height:150px;
display:block;
position:relative;
overflow:hidden;
}
.feature-image img {
position:absolute;
top:-50;
left:0;
width:100%;
}
basically i've 6 pictures with 6 text links down to them
i've done css hovering on pictures (color version -> on hover -> black & white version)
and on text links (black font -> on hover -> red font)
when i'm hovering on links - picture is getting hovered version (B&W) and that's ok, but that's only working in this direction, in opposite direction when i'm hovering on picture - text link stays the same (black font)
and that's my question, how to connect this two elements (text links and pictures)?
here's my code:
HTML
<ul class="menu">
li class="element_1">
Text of the<br>First<br>Link</li>
[rest of the elements list]
</ul>
CSS
ul.menu element_1{
width:130px;
margin-left:20px;
height:130px;
display: block; background: url(img/menu_1.jpg) top center no-repeat;;
}
ul.menu li.element_1:hover{
width:130px;
margin-left:20px;
display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;;
I don't see any CSS for changing the link color. I guess you're counting on the browser to do it?
You can fix this by adding the rule to your existing CSS:
ul.menu li.element_1:hover{
color: red;
width:130px;
margin-left:20px;
display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;
}
The alternative is to put your image and text inside a single element, in which case the browser will apply its automatic link highlight to the whole element.
Particularly as you're making use of background images, I would recommend restructuring your HTML to use only a single anchor. Then, when hovering that, you can apply both your image and font colour change.
Take a look at the jsFiddle for a simple example*. Here's the new CSS:
.element_1 a {
width:130px;
margin-left:20px;
height:130px;
display: block;
background: url('http://placekitten.com/200/300') top center no-repeat;
color: red;
}
.element_1 a:hover{
background-image: url('http://placekitten.com/300/300');
color: green;
}
When defining your :hover state, you only need to specify those things that are changing, rather than re-stating everything.
* Note that your HTML/CSS needed tidying up. You missed the . for your class selector and had multiple semi-colons. Make sure that your code validates and doesn't have these simple mistakes, as they will mask the true problem.
I have one div; header, and another called headerimg containing an image. I'm trying to make the header image stick to the bottom of the header (horizontal line) when resizing the page. Here's my code:
.header{
float:right;
width:93%;
height:100px;
padding-right:0px;
background-image:url('img/barhorizontal.gif');
background-repeat:repeat-x;
background-position:bottom;
postion:relative;
}
.headerimg{
bottom:0;
postion:absolute;
}
.headerimg img{
width:45%;
height:auto;
}
But it doesn't work. Here's my website: Click
Any help?
You misspelled position.
you have: postion
change to: position
How to spot things like this? Open developer tools in your browser. In Chrome, at least, it shows a little yellow triangle next to it and has that line crossed out. You see the error "Unknown property name"