I'm trying to make some text appear over an image when the image is hovered over.
This is typically a simple process, however apparently :hover doesn't work if the first div (for example)
first.div:hover second.div {
over (in my case an image) is using relative positioning instead of absolute.
There are lots of images in this page and they are set up as tables through CSS with attributes such as display:table; so I don't think I have the option of switching to absolute positioning. I know CSS tables aren't generally condoned, but I absolutely have to do it this way.
Right now I'm using opacity changes to try to make the text appear. I've tried using z-index too, but I think the problem is that the :hover effect doesn't work well with absolute positioning. What workarounds, if any, are available?
I'm not opposed to using languages other than HTML/CSS, but I'm pretty inexperienced and I don't understand them, so I'd prefer a CSS work around for this, but beggars aren't choosers.
As requested, here's some code:
HTML
<div class="cell"><img class="box" src="image1.jpg"><div id="text">Text text text</div></div>
CSS
.cell {
position:relative;
display:table-cell;
background-color:black;
width:700px;
height:auto;
}
#text {
display:table;
position:absolute;
z-index:999;
color:#fff;
text-align:center;
width:100%;
top:48%;
left:0;
}
img {
max-height:600px;
max-width:600px;
height:auto;
width:100%;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
opacity:0.4;
z-index:2;
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
opacity:1.0;
}
I'm not sure on what's causing this so I included a lot more than necessary... I'm a little new to coding so take it easy on me, but I can't get cell.div:hover #text { opacity:1;} to work. I read somewhere that this is because hover effects don't work with relatively positioned divs...
I am not getting you proper, what is your issue. And if you are clear to you have problem in only opacity, then you can use css as below.
first.div:hover second.div {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75; }
If it's not work for you, then please share your code or live link, then explain you proper.
you can just use opacity to achieve this. Make sure you are targeting the pic on hover. Check out this fiddle.
http://jsfiddle.net/Davidicus/69ZTN/
Wow, literally 30 seconds after I took the time to post all of my code I found a solution. I used div.cell:hover #text {
opacity:1; }
and everything worked. Not sure what I was doing wrong it was a late night and probably tried to do something dumb like img.box:hover #text commands. Anyway disregard this question guys, and thanks
Related
I'm experimenting a "zoom and blur" css effect. So when I hover over an image, it's supposed to blur out and scale a bit, while contained in a div with overflow:hidden.
However, when running in Chrome, there's always a weird glitch. A blurry white border shows up around the container while the transition is going.
I'm wondering if there's a better way of doing it? Or a method of circumventing it? Thanks a lot!
You can see a gif demonstrating the problem: http://imgur.com/SrK5rXq
And the same code running in firefox as a comparison: http://imgur.com/942LBKV
Note the borders within the image.
And below is my code:
<style>
#img0{
width:500px;
height:auto;
}
.hoverBlur{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transform:scale(1.1);
-webkit-filter:blur(15px);
-moz-filter:blur(15px);
filter:blur(15px);
}
.container{
margin:200px;
width:500px;
height:333px;
border:1px solid #ccc;
overflow:hidden;
}
</style>
<div class="container">
<img id="img0" src="test.jpg" class="hoverBlur"/>
</div>
This is a REALLY old thread but I ran into this issue and couldn't find the solution published anywhere else so I'm posting it here:
You can fix this by adding a margin to the image that is the same size as the blur size (in this case 15px) then transform: translating the image back into place.
https://jsfiddle.net/zeojxtvb/
So in our example, a blur(15px) is applied to the image. So also apply the following to the image:
img {
...
margin: 15px;
transform: translate(-15px, -15px);
}
I made an hover effect in my website that references an image that is the original image in 65% of opacity. The problem is, and this only happens one time, only the first time i hover it everything shakes/tremble a bit, but then everything starts working just fine. Perhaps something missing in my hover code? Can you see what's wrong?
Thanks for the help :)
The css code I'm using:
#rebface
{
content:url("http://static.tumblr.com/g1c47pc/Td2n783c4/nface.png");
position:relative;
left:8%;
margin-left:20px;
display:block;
box-sizing: border-box;
}
#rebface:hover {
content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png");
transition: 0.5s linear;
position:relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The HTML:
<div style="margin-top:20px; display:flex;">
<a target="_blank" href="http://www.facebook.com/sharer.php?u={Permalink}"><div id="rebface"></div></a>
</div>
You can see it here: (This website only works in chrome/safari for now)
http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de
You are swapping the images in the CSS content attribute. I'm quite sure these arent cached on page load so they are loaded when hovering what causes a short flickering.
You can simply avoid that by using opacity instead of another image.
.facebook
{
content:url("http://static.tumblr.com/g1c47pc/jhDn7hp40/sitef_1.png");
left:50px;
z-index:2;
position:absolute;
top:110px;
left:0px;
z-index:50;
}
.facebook:hover {
opacity: 0.6;
-webkit-backface-visibility: hidden;
}
And as a side note -- use background instead of adding a background image via the content attribute. It works for older browsers and is much more of a best practice.
In your css you have the following:
#rebtweet:hover{ some-styles }
#rebface:hover{ some-styles }
#rebtumb:hover{ some-styles }
#rebgplus:hover{ some-styles }
Each of these has one common style: transition: 0.5s linear;
Try removing this style. I'm not sure, but it may solve your flickering issue.
Hope this helps.
I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.
Fiddle (to be watched at in IE8)
.mybox {
position: absolute;
top: 362px;
left: 0;
width: 460px;
height:94px;
overflow: hidden;
text-align: left;
padding-left: 10px;
padding-top: 3px;
overflow:hidden;
background-color:#000000;
/* background: transparent; */
-ms-filter: "alpha(opacity=60)";
/* zoom:1 ; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=60);*/
}
OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.
Related resources:
2
3
4
Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.
All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.
You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.
If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;
Finally, I found an even better solution:
.mybox {
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}
UPDATED: Take a look with IE8
I obviously messed up something with the filter declaration, I am sorry about that... :(
I've installed the newest version of Nivo Slider, 3.2, on my website and it works fine in Firefox and Chrome, but in IE8 the slide links do not work. I have searched and tried a bunch of solutions, such as adding to my CSS:
.nivoSlider a, .nivoSlider img {
display: block !important;
}
But that only works on the first image of the slider, the rest of the images do not link to their assigned pages.
My site is here, click "Truck Sales" up top
CSS is here
Thanks for any help!
This is a known issue with nivo slider, add the following css:
.nivoSlider a.nivo-imageLink{
display:none;
filter: alpha(opacity=0);
opacity: 0;
-webkit-opacity:0;
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
background-color:#fff;
}
.nivoSlider a.nivo-imageLink img{
display:block!important;
}
It happens because IE has problem rendering an empty <a> without a background.. I've ran into this when a long time ago I wanted to place a link over a flash element. giving it a background and setting opacity to 0 will make it work correctly without harming the design.
This didn't work for me, but I found another solution:
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter: alpha(opacity=0);
/other than IE/
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
line-height: 375px; /*Change this to the height of your image*/
font-size: 0px;
}
.nivoSlider a.nivo-imageLink img{
display:block!important;
}
Now add some text in front of each image link:
TEXT GOES HERE<img src="yourimage.jpg" alt="image" />
It's a little hacky but it does the trick. -Cheers
I have this simple hover effect http://www.mysecretathens.gr/Sera/index.html
#footer ul li:hover {
opacity: 0.7;
filter: alpha(opacity=40);
}
in the social media icons down in the footer, but in IE I see a blue-border all around each of the icons. How to fix that? Do you also see this?
I don't see it, but I suppose they are <a> anchor tags. So for IE you would have to add border:0px; for the anchor tags which are your social media icons.
If you have a link around an image IE automatically puts a border around it.
To remove blue border Add a { border: 0 } in your CSS
Add this to your css:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
Edit: add it before filter: alpha(opacity=40);
if you have an link (anchor), it is the standard of internet explorer. in this case you have to reset the border with:
a {
border :none;
}
or
a {
border :0px;
}
and for the next time, i recommend you jsfiddle where you can put easily your code to run and debug it on the site for questions here.