Hoping for some advice around a CSS issue - I have a layout where I'm absolutely positioning link text above a background image, but cannot get the link to expand to the height of the container (in IEx, works fine in Chrome)
<div>
<img />
<a />
</div>
The containing div has a background colour, and the image has its opacity reduced - on hovering the image, the opacity reduces further, leaking more of the background color. At the same time, the opacity of the link changes from 0 to 100. I'm using a few CSS transitions as well, just to prettify it.
I know that positioning the link absolutely removes it from the flow, so setting height to 100% won't work, but shouldn't I be able to set it explicitly? Doing so works in Chrome but not IE. Problem is related to the image, as the link behaves correctly if it is removed.
Example:http://jsfiddle.net/thSCJ/8/ (includes just enough detail to highlight my problem. In IE, hovering the top left of the image reveals the link. In Chrome, any hover on the image reveals the link).
Any suggestions?
You need to have the <a> tag wrapping the image and the text:
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
<span>Link text</span>
</a>
Here is the CSS:
a {
width:200px;
height:200px;
background:#cccccc;
}
a:hover > span {
display: inline;
}
span {
display: none;
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
color:red;
}
Fiddle: http://jsfiddle.net/thSCJ/12/
Instead of changing the opacity, simple change the font-size property and put the entire thing in the <a> tag.
See this JSFiddle.
Related
I've tried using the scenario in the link below too show hidden text when mouse over text. It works fine with text but what my client is needing is to hide the webbot HitCounter and show it when they place the mouse over. Any help would be greatly appreciated.
Show hidden text on hover (CSS)
<div id="DivForHoverItem">
<div id="HiddenText"><p class="auto-style4">
<!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
</div>
</div>
CSS Code:
/* Div for hover item */
#DivForHoverItem {
height: 50px;
width: 300px;
background-color: black;
text-align:center;
}
#HiddenText {
display:none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
Remember that display:none "removes" element (div do not occupy space) from layout. So You have nothing to point with cursor (without creating another wrapping div/divs with fixed size, or gettinng into js and conditions of another element) to start the hover effect.
So maybe outer wrapper div?
Maybe visibility: hidden in place display:none?
Maybe Changing the Z-Index?
Or another div on top of counter (covering it with background solid color) with alpha transparency change on hover (even fading out css animation) ?
Jsfiddle
Im very new to HTML and CSS and my weakest points are positioning things.
1)Each picture has its respective green button but my question is how do i put these pictures next to each other instead of on top of each other?
2) how would I code it so that if I hovered over the picture, the corresponding button would still change color up and allow me to click the picture to go to the link?
HTML
<!DOCTYPE html>
<div id="chewning">
<img src="http://scontent-b.cdninstagram.com/hphotos-xap1/t51.2885-15/10518156_366963580136787_506416400_a.jpg" </img>
<a href="https://www.youtube.com/user/maxxchewning">
<div id="EFGREEN">
</div>
</a>
<div id="CG">
<img src="http://cdn.shopify.com/s/files/1/0232/0959/products/575757_10152033748519359_1620549997_n_2.jpg?v=1398666646"></img>
</div>
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<div id="CGGreen">
</div></a>
</html>
CSS
#chewning {
display:inline-block;
margin-right:1000px;
margin-top:-40;
}
#EFGREEN {
background-color:green;
width:306px;
height:100px;
display:block;
}
#EFGREEN:hover{
background-color:red;
}
a:{
display:block;
}
#CG{
float:right;
}
#CGGreen{
background-color:green;
width:414px;
height:500px;
}
#CGGreen:hover{
background-color:red;
}
As already mentioned in some comments, the markup and CSS of your demo
could be improved and there are plenty of online resources (won't recommend
any specific).
But as you have 2 specific questions - how to display both images next to
each other and how to change the link in a way that also the image is linked and the button is displayed in hover state (changes the background color) when the image is hovered - I'd just like to give an answer as well as maybe providing some information on how to improve your code.
In this adjusted Fiddle I've kept but commented out your CSS and added the following new CSS instead:
.button {
background-color:green;
width:100%;
height:100px;
}
.item {
float:left;
}
.item:hover .button {
background-color:red;
}
To display both images next to each other, I've wrapped both items (image and button)
in a div with the class item. These items float left, so they're displayed
next to each other. I've added the class button to both buttons so it's not
necessary to repeat styles based on the buttons' ids.
You've set the width of both buttons to the different widths of the images which
can be handled in a more dynamic approach by just setting the width of the
buttons to 100% - based on the image width the surrounding item container
will have the width of the image, and the div with the class button automatically
has the same width (100% of the container).
I've moved the anchor tags that previously only wrapped the button div to wrap the
whole divs (which contain the image and the button) contained in each item, so the whole content is linked.
Adding .item:hover .button { background-color:red}, the buttons will be displayed
in red when hovering an item container.
Note that there are different ways to display content next to each other - just
to mention one of them using display:inline-block - Fiddle - instead of floats. As
you'll notice, then also the buttons are displayed aligned next to each other.
It depends on the required layout (and maybe also on one's personal preferences)
which to choose.
I have three divs, one hidden:
Parent
Message (hidden)
Image
I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.
I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.
I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).
Here is the js fiddle. If you have any alternative approach please tell me.
EDIT: This is a example image of how it should work. It should also float and scroll with the page.
Switch the position of elements as mentioned in your style.
This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”
Demo
css
#img:hover + #msg {
display: block;
}
#Html Snippet
<div id="img">
<a href="some link here">
<img src="http://j.mp/18xsrJQ"/>
</a>
</div>
<div id="msg">
This should appear if icon is hovered.
</div>
To illustrate this:-
Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.
<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>
h3 +p {
color: gray;
}
I have an element (bar) positioned over an iframe, if i set an opacity on that element it stays under the iframe, even if that item has a bigger z-index than the iframe.
However, if i create a container (foo) around that element and the iframe, and set the opacity there, the (bar) element stays in front of the iframe like intended.
CSS:
#bar {
width:100px;
opacity:0.5;
height: 150px;
position:relative;
top:100px;
z-index:2;
background:red
}
#foo {
/* opacity:0.5; */
}
HTML
<div id="foo">
<div id="bar">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>
Creating that container would solve my problem, but i cannot do that because my current markup doesn't allow it. I would need the opacity to stay in the bar element.
This only happens in Firefox, and the content of the iframe is a .pdf file.
How can i get the bar element to stay on top of the iframe while maintaining its opacity setting?
fiddle here
UPDATE:
It seems the problem is related to the fact that i'm sourcing a pdf file instead of a webpage in the iframe.
updated fiddle
Thanks in advance
If you use background: rgba(255,255,255,0.5) other element will not be effected by the translucent background.
In the example that I provided the rgb color(255,255,255) is white when you use rgba the last digit is use to set the opacity, .5 would be 50% translucent.
#foo {
background: rgba(255,255,255,0.5);
}
Look at those links. I think that is a discussion of your problem:
StackOverflow and Adobe statement for this problem
I found one more theme to discuss this. As your case they use pdf iframe:
Link here
from what i understand, you want the text to be above the picture, and transparent?
i did something like this on the cover page one of my older sites, chadwaddell.info.
I made a container div, and then put the picture in its own div, and the text in its own div.
set the container position to relative, and the picture position to absolute. also, i would use rgba to do the opacity like this
#bar {
width:100px;
opacity:0.5;
height: 150px;
position:relative;
top:100px;
color: rgba(3,3,3,0.5)
background:rgba(255,0,0,0.5)
}
i went onto your fiddle, and did what i was trying to say, hope this helps http://jsfiddle.net/N9cZp/23/
jsFiddle
I've got a BG Image attached to a link with the class selectedlink
The Image shows, but as I position it down, it disappears outside the link's visual parameters. It's like the href is a window to the image.
Here's the code:
CSS:
div#intnavIcons a.selectedlink {
color: #900404;
font-size:11px;
font-weight:bold;
padding:#FFF;
text-decoration:underline;
background: url("/images/nav/bg-nav-current.png") no-repeat scroll center bottom transparent;
}
HTML:
<div id="intnavIcons">
<a class="selectedlink">This is selected</a>
<a>This is not selected</a>
<a>This is not selected</a>
<a>This is not selected</a>
</div>
Can anyone see if I'm missing something in my style for keeping the image above the href?
For moving it farther down, I'm just adding background-position: 0px 10px;
The background image is limited to the box of the element (the specific box depends on the background-clip style). If you're trying to move it down, it will start disappearing when it hits the bottom of the box.
You may want to try adding padding-bottom:10px.
I also notice you have padding:#FFF, which makes no sense. Did you mean background-color?