Cheat codes for advanced manipulation of Visual Composer

vc-cheatcodes.scss

/* Makes text white */

.white-text, 
.white-text b, 
.white-text h1, 
.white-text h2, 
.white-text h3, 
.white-text h4, 
.white-text h5, 
.white-text h6, 
.white-text p, 
.white-text span, 
.white-text strong {
    color: #fff;
}

/* Centers Text */

.center-text,
.center-text .wpb_wrapper,
.text-center,
.text-center .wpb_wrapper,
.align-center,
.align-center .wpb_wrapper {
	text-align: center;
}


/* Make icons in row inline and center them */
/* As opposed to stacking on top of each other */

.inline-icons .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-left,
.inline-icons .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center,
.inline-icons .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-right,
.inline-icons .vc_icon_element {
	text-align: none;
	display: inline-block;
}

.inline-icons .wpb_wrapper {
	text-align: center;
}


/* Reverse Layout */
/* Reverses the layout direction of a row's columns from left-to-right to right-to-left */

.reverse-layout.vc_row {
	direction: rtl;
}

/* Prevent rtl from afftecting content */
.reverse-layout.vc_row .wpb_column {
	direction: ltr;
}



/* Click to View */
/* Add Hover overlay for single images and every child image */


.ctv .vc_single_image-wrapper,
.ctv .wpb_single_image,
.ctv.wpb_single_image {
	position: relative;
}

.ctv .vc_single_image-img {
	border-radius: 3px;
}

.ctv .vc_single_image-wrapper:before {
    content: " ";
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1em;

	display: flex;
	justify-content: center;
	align-items: center;
	
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background: #000000;
	border-radius: 3px;
	
	opacity: 0;
	
/* 	cursor: pointer; */
	pointer-events: none;
	
	-webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;

}

.ctv .vc_single_image-wrapper:after {
	content: "CLICK to VIEW";
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1em;

	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	transform: translateY(10px);
	opacity: 0;
	
/* 	cursor: pointer; */
	pointer-events: none;

	-webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    z-index: 1;
}

.ctv .vc_single_image-wrapper:hover:before {
	opacity: 0.4;
}

.ctv .vc_single_image-wrapper:hover:after {
	transform: translateY(0px);
	opacity: 1;
}

/* BG Opacity */
.ctv.ctv-group .vc_single_image-wrapper:before,
.ctv.ctv-single .vc_single_image-wrapper:before,
.ctv.ctv-conference .vc_single_image-wrapper:before,
.ctv.ctv-image-buttons .wpb_single_image .vc_single_image-wrapper:before,
.ctv.ctv-image-buttons.wpb_single_image .vc_single_image-wrapper:before {
	opacity: .4;
}

/* BG Hover Opacity */
.ctv.ctv-group .vc_single_image-wrapper:hover:before,
.ctv.ctv-single .vc_single_image-wrapper:hover:before,
.ctv.ctv-conference .vc_single_image-wrapper:hover:before,
.ctv.ctv-image-buttons .wpb_single_image:hover .vc_single_image-wrapper:before,
.ctv.ctv-image-buttons.wpb_single_image:hover .vc_single_image-wrapper:before {
	opacity: .6;
}

.ctv.ctv-image-buttons .vc_single_image-wrapper:after {
	content: none;
}