The following works in some browsers but not in IE:
Expected result: By default, Blue div covers image... however mouse hover over any visible part of image brings entire image forward (in front of blue div).
http://jsfiddle.net/NUz3M/
CSS:
.container { position:relative; }
.bigpic { position:relative;width:300px;height:300px; }
.bigpic img { z-index:2; position:relative; }
.bigpic img:hover { z-index:10; }
.shade { z-index:3;
position:absolute; top:20%;left:0;
width:100%; height:200px;
background-color:blue; }
HTML:
<table>
<tr>
<td class="container" >
<div class="bigpic">
<img src="http://s8.postimg.org/xhqgtehlh/sample.jpg" />
</div>
<div class="shade"></div>
</td>
</tr>
</table>
Any ideas? suggestions? Trying to stay away from Javascript for this.
Thanks!
This is based on information from the link by #showdev. If the parent z-index is changed on hover instead of the image, it works.
.bigpic:hover { z-index:10;} rather than .bigpic img:hover { z-index:10;}
jsfiddle.net/sMg7a/1/
You do need to make a little more effort reading the links given in your comments.
P.S. Tested in IE 10.0(.9200.16721)
Related
Is there a way to make a text appear on an embed image?
[That text appears when the cursor hovers over the image]
https://css-tricks.com/text-blocks-over-image/
You can use the :hover selector in the css to make your text appear when the mouse hovers over the image
Without any examples, yes. Your image and text should be different entities, in that CSS should be able to reference them distinctly. Then you can just do something like this.
#your-text-elements-id:hover {
visibility: "visible"
}
#your-text-elements-id {
visibility: "hidden"
}
you can use the below code to make text appear on cursor hover the image
.texthover {
width:100%;
display:block;
position:relative;}
.texthover .overlay {
position:absolute;
top:25%;
height:50%;
padding:10px;
display:none;
}
.texthover:hover .overlay {
display:block;
}
<div class="texthover"><br />
<img src="https://lh3.googleusercontent.com/U2R2BfwOe-ZiqI1gSgmTpZPDkWBNacaO8_HZkKkVee-wHlHV505gmX91DZnq-dYbzY96" height="50%" width="50%"/>
<div class="overlay"><br />
<h1>Ashok Purohit</h1></div>
</div>
It's hard to explain without a picture, so if your willing to help, visit this page: http://www.laoistidytowns.ie/node/2
Ok, so on this photo I have the following CSS: (note this is just one picture, but i have classes for each placename)
.ballacolla
{
float:left;
position:relative;
width:200px;
height:200px;
margin-right:40px;
margin-bottom:46px;
}
.ballacolla a
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */ <br>
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
.innerbox
{
position: absolute;
bottom: 0;
width:180px;
height:30px;
background-color:#000;
opacity:0.75;
filter: alpha(opacity=40);
padding-left:20px;
padding-top:10px;
z-index: +1;
}
p.boxtag
{
color:#fff;
}
HTML:
<div class="ballacolla"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
.ballacolla = the dic square container
.ballacolla a = allows the div to be clickable
.innerbox = dark grey box on the bottom
.boxtag = the writing in the innerbox
My problem is the innerbox (grey box) disappears if the link is working. How do I stop the innerbox from disappearing?
Most likely, even with HTML5, you are having difficulties with the div in the link...mixing inline with block styles.
I would take a look at some of the other threads on here pertaining to that. This one points you to a good method of styling a span as a div using a special class and the display;block method: div inside anchor
you can always go for the onclick=(); event on the div as well and eliminate the a tag all together.
In your styles, it says opacity:0 for a tags. Add a class a below.
.field-items a{
background:none;
opacity:1;
}
Ok guys I figured it out. I had to close the tag right after the first div in my html. ie my html now looks like : <div class="abbeyleix"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
the reason you don't have anything between the tag is because you actually are doing all the work in the CSS... such a simple fix, but it's working now, thank you all for your help
I have an image which has and inner border with opacity set to .7 and round corners, which works great. The only problem is i need to add a hover state to image. I have tried :hover but nothing seems to work.
The border needs to go blue and with a png overlay.
HTML:
<div class="box" >
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1" >
</div>
</div>
CSS:
.box{
width:191px;
background:#FCFBDF;
margin: 0 auto;
}
img{
width:191px;
height:191px;
display:block;
border-radius:50%;
}
.imgWrap{
position:relative;
}
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border: 10px solid rgba(248, 248, 255, 0.7);
border-radius:50%;
}
JS Fiddle here
http://jsfiddle.net/zangief007/52fFF/3/
I am guessing you tried to fire the hover state on the image like this :
img:hover{
.. your code ...
}
But as there is a pseudo element over it, you can never hover the image.
The workaround is to trigger the hover state on the pseudo element like this :
.imgWrap:hover:after{
border-color:blue;
background: url('PATH TO YOUR IMAGE');
}
DEMO
Add hover like this.
.imgWrap:hover{
width:250px;
}
PS : I am just adjusting the width based on hover. But you could do whatever you like in the hover.
Hope this helps.
Cheers!
EDIT : Assuming you don't need to modify the image with the cat, web-tiki's solutions seems better.
I think you may have to use some Javascript/Jquery, as long as you can't directly trigger a mouse hover on the image (because there is some element above).
Here is an example.
$(".imgWrap").hover(function(){
$('img').toggleClass("imgHover");
$('.imgWrap').toggleClass("imgHover");
$('.box').toggleClass("imgHover");
});
.imgHover{
width:300px;
height:300px;
}
try this in your JSFiddle. don't forget to add Jquery lib
http://jsfiddle.net/52fFF/11/
As example i just changed the size of the Box, the Circle and the image.
I'm trying to make a custom splitter which is a <div> between page1 and page2, but some weird lines is showing which I don't know where they came from, or how to hide them!
spiltter.png
pattern1.png
Snippedshot
.zikzak, .splitter, .split-content
{
float:left;
width:100%;
}
.splitter
{
height:250px;
}
.split-content
{
margin-top:-50px;
height:250px;
background:url(img/pattern1.png) repeat;
}
.zikzak
{
position:relative;
height:50px;
}
HTML:
<div class="splitter">
<div class="zikzak" style="background:url(img/spiltter.png) repeat-x"></div>
<div class="split-content"></div>
<div class="zikzak" style="background:url(img/spiltter2.png) repeat-x"></div>
</div>
Problem with you image called spiltter.png As the image edges are transparent not solid, that's why you are getting strange behavior.
To solve this bug you have to filled image edges with solid color.
I want to keep a div on another div, which is linked to any site.
here is my css
.link_div a {
float:left;
width:80px;
height:20px;
background:yellow;
}
.over {
position:absolute;
left:0;
top:0;
background:red;
width:80px;
height:20px;
}
here is html
<div class="link_div"> HELLO </div>
<div class="over"></div>
Is this possible to keep "Over" div on top and link should be on ?
This is an awesome post:
Click through a DIV to underlying elements
Adding this css to your .over should do it:
pointer-events:none;
plus for IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;
You could get something like this then:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
All credits go to this guy's post of course.