Experts Exchange connects you with the people and services you need so you can get back to work.

take transparency off logos

How do I remove the transparency effect from the logos that appear in orange boxes (Control 4 and Cedia) below the navigation? I tried a couple things and nothing seemed to work.

http://nsitedesigns.com/nsitedesigns/gei/structured_wiring.html
http://nsitedesigns.com/nsitedesigns/gei/gei.css

img.logos_sidebar {
		padding: 10px 0px 2px 12px;
		z-index:999;}

.sidebar_logos {
	float: left;
	width: 180px;
	background-color: #eaa53e;
	border:2px solid #006576;
	margin: 5px 0px;
}

<div class="sidebar_logos"><a href="http://www.control4.com/info/home-automation?gclid=COPQwduB6rsCFclaMgod8H4AKA" target="_blank"><img src="img/logo_control4.png" alt="Control 4 Dealer" width="156" height="155" class="logos_sidebar" /></a></div>
        <div class="sidebar_logos"><a href="http://www.cedia.net/" target="_blank"><img src="img/logo_cedia.png" alt="Cedia Professional Certification" width="155" height="213" class="logos_sidebar" /></a></div>
            <div class="sidebar_logos"><a href="http://www.manitowoccountyhomebuilders.com/" target="_blank"><img src="img/logo_manty.png" alt="Manitowoc County Home Builders Assn" width="160" height="53" class="logos_sidebar" /></a></div>

Open in new window

nsitedesigns

Asked: 2014-01-16

Advertise Here

3 Solutions

LVL 38

Tom BeckCommented: 2014-01-16

There's only one way I know of. The class="sidebar_logos" containers have the transparency so anything inside will have the transparency as well. You need to move the anchors with the images inside up one level in the DOM so they are children of the class="sidebar" div (to the same level as the class="sidebar_logos" divs). Add position:absolute and top and left position values to the <img> elements until they are positioned where they were before. Because the class="sidebar" div is set to position:relative, the position absolutes will be relative to the sidebar div.

LVL 58

GaryCommented: 2014-01-16

Change your background-color in .sidebar_logos {} to

rgba(234, 165, 62, 0.8)

Remove

.sidebar1 div {
opacity: 0.8;
}

LVL 58

GaryCommented: 2014-01-16

Actually this make more sense

just remove the background-color from .sidebar_logos {}

Remove the opacity: 0.8; from .sidebar1 div {} and instead add in background:rgba(234, 165, 62, 0.8)

nsitedesignsAuthor Commented: 2014-01-16

Cathal, I tried your solutions but they did not work.
TommyBoy, I am not sure how to implement what you suggest.

LVL 58

GaryCommented: 2014-01-16

Update your code online - it does work. You may have missed my edit

Remove
.sidebar1 div {
opacity: 0.8;
}

Or follow my second example method

nsitedesignsAuthor Commented: 2014-01-16

Client just told me she ALSO wants the turquoise bar at the top and the side borders to be solid, not transparent. Ugh! How do i do that? The red arrows are pointing to the problem areas. Ask me how much I like transparency. Go ahead - I dare ya! LOL

http://screencast.com/t/FdoYHFeRoJ

nsitedesignsAuthor Commented: 2014-01-16

Cathal,

I removed the reference below and uploaded page. I cleared history. I don't see any change.

http://nsitedesigns.com/nsitedesigns/gei/gei.css

.sidebar1 div {
opacity: 0.8;
}

g

LVL 58

GaryCommented: 2014-01-16

You've removed the opacity but you need to add

.sidebar1 div {
background:rgba(234, 165, 62, 0.8)
}

And remove background-color: #EAA53E; from .sidebar_logos {}

Remove opacity: 0.9; from
.sidebar_nav {}

Borders should be solid - they will not be affected by the transparency