Change transparency of overlay

If you satisfied with the color of the overlay, but want to decrease/increase the transparency of overlays, you can use ONE of these ways:

1. Using custom colors in options Youplay Options > Theme Style > Custom > Sizes. Then change Images Opacity and Images Hover Opacity.
2. Using custom CSS.
   Note: The best way – add these custom styles, in child theme style.css. Also, you can add it in options Youplay Options > General > Custom CSS, but in this way, you should add for each value important tag (Example: opacity: 1 !important;)

/* Banners overlay 100% transparency */
.youplay-banner .image {
   opacity: 1;
}

/* Angled images overlay 100% transparency */
.angled-img .img > img {
   opacity: 1;
}

/* Angled images overlay on mouse over 70% transparency */
.angled-img:hover .img > img {
   opacity: 0.7;
}

Change overlay color

There are also 2 ways, you can use ONE of it:

1. Using custom colors in options Youplay Options > Theme Style > Custom and change Back Color. You will change not only overlay color, but also overall theme colors.
2. Using custom CSS. Read the note in 2 points of the first instruction.

/* All color values are default. Please, change it to yours. */

/* Banner background color */
.youplay-banner {
   background: #160962;
}

/* Angled images background color */
.angled-img .img {
   background: #160962;
}

/* Footer background color */
footer .social {
   background: rgba(8,3,37,.45);
}
footer .copyright {
   background: rgba(8,3,37,.7);
}