Community Forums › Forums › Archived Forums › General Discussion › Transparancy of parallax effect
Tagged: parallax effect Altitude Pro
- This topic has 3 replies, 3 voices, and was last updated 8 years, 9 months ago by Thorzen.
-
AuthorPosts
-
June 17, 2015 at 4:21 am #156503ThorzenMember
Hi there!
I am new and trying to get around with WordPress / Genesis Altitude Pro. I have a question on the transparency of the parallax effect on the home page of the Altitude Pro theme.People think it is too dark - although the background image is light and colourful. Is there anybody so kind to point me in the right direction?
Thank you!
http://www.prefixprint.nlJune 17, 2015 at 8:05 am #156520emasaiParticipantFind the lines starting at 1186 in style.css, then change the last number before the closing bracket to a lower number. This controls the level of opacity and you will have to do this for all the iterations.
E.G.
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
to lighten up the image change to
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.4) 30%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.8) 100%);
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJune 17, 2015 at 8:09 am #156521David ChuParticipantHallo!
Interesting question, and that's a good idea... that hipster fade effect doesn't work well with that photo.I found the thing that's doing that. Take a look at the CSS. Sorry, my Dutch is non-existent, but in English you'd go to Appearance..... Edit. You can get rid of the effect by commenting out (or deleting) all lines beginning with "background", and also the one beginning with "filter", which is for silly Microsoft browsers.
.image-section { background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 ); display: table; overflow: hidden; table-layout: fixed; width: 100%; }
Cheers, Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
June 17, 2015 at 1:52 pm #156561ThorzenMemberThank you Lynne! It worked like a breeze. I implemented your solution for two reasons. You mentioned the line numbers and with Text Wrangler I could find it directly. Secondly I wanted to keep the coding (just in case) in stead of get rid of it all at once as Dave Chu suggested.
To Dave : you helped this dutch guy tremendously. If two people (Lynne and you) answer a total stranger's question that quickly and the problem was resolved directly - than your Dutch is fine. And as a Mac user I can agree with your comment on silly Microsoft browsers.
Again : thank you! You made my day and good luck to you!
Warm regards,
Thorzen
-
AuthorPosts
- The topic ‘Transparancy of parallax effect’ is closed to new replies.