Forums

DoPeT

Hello all!

So, I'm just nearly finishing my portfolio and in Firefox these boxes have a a:hover opacity rollover image,
so it fades out and everything. However, in Chrome/Safari they seem to be not working at all or anything.

Link to portfolio: http://bit.ly/OdhDWJ

HTML:

<div class="sq"><a href="http://xxxxxxx.me/old/img/work/xxxxxx_l.jpg&quot; rel="lightbox[work]" title="xxxxxxx">
<img src="img/w/xxxxxxx_s.jpg" class="ws"></a></div>

CSS:

.sq {
	background-image: url('img/w/open.jpg');
	width:210px;
	height:209px;
	float:left;
	margin-top:24px;
	margin-right: 12px;

}

.sq a {
	-webkit-transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
	-o-transition: all 0.8s ease-out;
}

.sq a:hover {
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
opacity:.15;
-webkit-opacity:.15;
 -moz-opacity:.15;
}

img.ws {
  	float: left;
  	padding-right: 12px;
  	margin-top: 0px;
  }

Could this be an issue of webkit, do I need to add something more, etc?
Thanks all for taking your time to read, appreciate it.

jurotek

I think maybe because your anchor has 0 width and heigh so you either apply overflow auto or set the opacity on .sq:hover
btw. I don't use browser prefixes for opacity and it seems to work ok

DoPeT

We're getting somewhere!

I added the same elements .sq a:hover to a new style .sq:hover and
now in chrome/safari, the squares go the appropriate opacity and fade perfectly.
But, they don't overlay the background image behind in .sq style, do I have to add
something else as well considering we added .sq:hover and that works?

However on Firefox now, it changes the .sq background-img to the same opacity as well.

Thanks for your fast response.

(updated results online as well)

jurotek

that background image which has + in center?
btw. I think the opacity of .15 is just way too high. Try something like .4 or .5

DoPeT

Yeah, the background-image that is black with the + in the center.
Only reason, I want it .15 is because I want it to be almost just black so it stands out.

I've done this before too, just my first time something like this is acting up..

kgscott284

Hmm, no cross shows up in chrome...I really kind of want to second what @jurotek said about the opacity...and does it HAVE to be CSS only? jQuery could handle this so much easier...??

DoPeT

I really wanted to try to see if I could get it working, but I'm very open to jQuery!

Would you know any plugins that I can hover over the square picture and fade into my black/+ image?
Much appreciated!

joshuanhibbert

I think I see what the problem is. Instead of changing the opacity of the div (.sq) you need to change the opacity of the img that is the child of that div. Placing the opacity and transition on img.ws worked for me. Oh, and this is crazy simple when it is working, no need for jQuery at all in my opinion.

DoPeT

You're a genius Josh!! That was exactly the problem! I can't believe I didn't think of that at all.
I knew this solely could be done with just CSS (as I've done it before) and it's very simple & effective without using jQuery.

Thanks again mate, exactly what I needed to hear. Love this community!

joshuanhibbert

No worries, glad to help!

treehouse : what would you like to learn today?

Forums

[Solved] CSS / Opacity hover issues in Chrome/Safari but not in Firefox?