Make content-boxes semi-transparent

Community Forums Forums Design Tips and Tricks Make content-boxes semi-transparent

This topic is: not resolved

This topic contains 2 replies, has 1 voice, and was last updated by  markjohnl 4 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #108827

    markjohnl
    Member
    Post count: 2

    Hi,

    I’m using the Parallax Pro theme and have been playing with the content-box-gray class. I wanted to make one of the boxes semi transparent, so added the following code

    .content-box-gray {
    	background-color: #000000;
    	border: 1px solid #afcde3;
            opacity: 0.4;
            filter: alpha(opacity=40);
    }

    I added the opacity and filter lines as per what I had read on the w3schools site. Sadly, the content box isn’t showing as transparent. I am new to Genesis and CSS, so maybe this is completely wrong.

    Any help would be hugely appreciated!

    Thanks,

    Mark

    #108829

    markjohnl
    Member
    Post count: 2

    Oops! I just cleared my cache and it worked. Well, it worked too well. I have wrapped text and an image within the content-box-gray div and now everything is semi transparent. Is there a way to only make the content box background semi-transparent?

    Thanks,

    Mark

    #108834

    markjohnl
    Member
    Post count: 2

    I think just posting here has been all the therapy I need. Another hours googling and I found that the answer was to replace the hex in the background-color with this

    background-color: rgba(0,0,0,0.7);

    Works perfectly! Hope this helps someone else down the line.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.