Image Transparency

HTML & CSS
1

Hey Guys,

Wondering if you guys can help me solve this issue.

When your not on the image I have the opacity of the image at 60% and when rollover it, its at 100% but how can I make it so where when you click on the image and the information opens up for that person it stays at 100%?

Here is the link, you can click on the faces below to see what I mean…

http://modocom.ca/gillons/staff-directory/

Thanks,

Mike

2

Since you are using JS, you can just add a class to the toggle box that sets its transparency to 100%, and which is removed when clicked again.

BTW, you have at least 4 versions of jQuery loaded on that page. That can cause things to break, and is unnecessary anyway. Don’t add the jQuery library every time you add a jQuery script. Once the browser has loaded the library, it doesn’t need to do it again, and again, and again. Just make sure to link to the one copy of the library before linking to any other scripts on the page, so that they can all look up and reference the one copy.

3

Thanks ralph.

I think I got all of the versions of jQuery deleted now hopefully.

How would I go about adding the class in JS for the click on the photos.

*Also, I’ve tried different ways to center the image in the div the circle images but can’t seem to get it its always left-aligned for some reason even using margin-left: auto and margin-right: auto which usually works for me.

Thanks,

Mike

4

HI,

You already have an open class being applied to the image when clicked so just use that.


img.circle.open{opacity:1.0;filter:alpha(opacity=100);}

BTW that image is 1700K!!!

It should be about 7k lol :slight_smile:

5

margin:auto only works on block elements and an image is inline by default so just use text-align:center on the parent.


.toggle3-box{
text-align:center;
}

Or set the image to display:block and use margin:auto.

6

Thanks Paul,

Sorry but where do I put that script exactly for open class to have picture at 100% when open. Yea I got to change that picture to smaller size lol.

Thanks,

Mike

7

Script ?

You mean the CSS I gave in post #4?

Just put it at the end of your css after any original rules for that element.

8

Ooops sorry, got it working now lol.

One other question on this page…

http://modocom.ca/gillons/insurance/business-insurance-2/

My borders are not working around the circle images. I a blue circle border around them but its not showing at all any reason why?

Thanks,

Mike

9

Possibly because you haven’t specified a border for them :slight_smile:



.circle img {
 [B]   border: 1px solid #000000[/B];
    border-radius: 50%;
    display: block;
}
10

Ah, ok firebug doesn’t show typos :slight_smile:


	border: 2px solid ##3a6f8f;

You have two hashes instead of one and the rule is ignored.