I have 3 images. When hovering one an image goes on top of the hovered one.
Here's my code:
HTML
<a class="toggle"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle" style="margin-left:30px;margin-right:30px"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle"><img src="" style="position:absolute"><img src=""></a>
CSS
a.toggle img:hover {
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
}
Everything works fine with Firefox and Chrome.. Problem is with Internet Explorer (also IE 10). The middle image is positioned weirdly!
Check out the fiddle with IE to see the problem http://jsfiddle.net/6nebL/
How can I fix this in a clean way and without adding complexity to the code?
set a to inline-block:
a {
display: inline-block;
}
fiddle updated:
http://jsfiddle.net/6nebL/3/
Here, I've updated your CSS and HTML to be a bit more ... friendly. The CSS:
.toggle img:hover {
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
}
.toggle {
display:inline-block;
vertical-align:middle;
width:150px;
position:relative;
margin:0 30px;
}
img {
position:absolute;
top:0;
left:0;
}
And HTML is just without the inline styles.
Here is the updated jsFiddle.
Related
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
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)
Please see the code below, both image and text are located up in the div.
How to vertical align to the middle, both the image (div_a) and the text (div_txt) inside <a>, using pure css, and keep the div clickable (preferred solution with cross browsers compatibility):
<style type="text/css">
a.div_a {
display:block;
width:320px;
height:160px;
background-color:#CCC;}
</style>
<a href="www.mydoamin.com" class="div_a">
<img src="http://jsfiddle.net/img/logo.png" style="float:left; margin-right:10px; background-color:#666;" />
<span class="div_txt">Content</span>
</a>
I tried the following, but that didn’t help:
.div_txt {vertical-align:middle;}
I found separated solutions on the above for image/text, but not for both together.
Give display: table to your anchor element, and then wrap each your image and span in a .wrapper span with the following properties:
.wrapper {
display: table-cell;
vertical-align: middle;
}
HTML:
<a href="www.mydoamin.com" class="div_a">
<span class="wrapper">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:#666;" />
</span>
<span class="wrapper">
<span class="div_txt">Content</span>
</span>
</a>
See DEMO.
Please note that this approach will not work in IE7, so if IE7 support is a requirement, you will have to use a more elaborate method.
Taken from Vertical-align image and altered slightly to account for <a> (jsFiddle demo):
Extra markup for link
a.absoluteCenterWrapper {
display:block;
}
CSS
.absoluteCenterWrapper {
position:relative; /* Contains the image in the div */
}
/* Positioning */
.absoluteCenter {
margin:auto; /* Required */
position:absolute; /* Required */
top:0;bottom:0; /* Aligns Vertically */
}
/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
max-height:100%;
max-width:100%;
}
HTML
<a href="http://www.example.com/" class="absoluteCenterWrapper">
<img src="PATHTOIMAGE" class="absoluteCenter">
<p>Paragraph goes here.</p>
</a>
The image is scaling based on browser width only in chrome but it is not working in IE and Mozilla Firefox.
thumb img is working in all the browsers but only .play img max-width is not working
Here is my
HTML
<div class="contai">
<div> <img src="1.png" style="max-width:100%" /></div>
<div class="thumb">
<img src="2.jpg" />
<div class="play"> <img src="videoImagePlay.png" /></div>
</div>
</div>
CSS
.contai{
width:100%;
}
.thumb{
border: 1px solid rgb(226, 226, 226);
position:relative; float:left; width:38%
}
.thumb img{
max-width:100%
}
.play{
position:absolute; top:30%; left:35%
}
.play img{
max-width:50%
}
play class right : 0
as like this
.play{
position:absolute; top:30%; left:35%; right:0;
}
Live demo http://jsfiddle.net/puS7u/
see this fiddle. it may help you.
This might help someone in the future:
If the image has a parent which is a table (doesn't matter how high up in the node tree) then max-width will not work in FF or IE unless you have a specific pixel defined max width on the table. This does however work fine in Chrome.
The logic seems to be that FF and IE thinks that tables always should expand according to the content, disregarding max-width: 100%.
Not obvious which browser has the "correct" or best implementation.
I want to add a clickable image in my html page, with opacity and when I hover with my mouse over the image, the opacity has to change to 0. (with a: hover)
I tried different methods, but not one works..
Can anyone give me the code?
I found out how to fix the problem:
<html>
<div id="yourdiv">
<a href="#">
<img src="images/yourimage.png" width="20" height="20" alt="..." />
</a>
</div>
</html>
<style>
#yourdiv img{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
#yourdiv img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
Have you tried at least googling your issue?
Doesn't seem so...
http://www.webdesign.org/html-and-css/tutorials/images-with-hover-effects.9130.html