We Keep Coding

<div> figures in search rendering issue

SO I have some code where jQuery and CSS are made to create a close icon after clicking the search icon. It uses the same div elements since it is supposed to animate itself (it doesn't in our case). As I was working (without affecting anything that has to do with the following search icon), I realized one of the divs height is out of place. If you view the CSS, you see that there are two divs with class of 'search2' and one of them is at an improper height or scale. I tried resizing the window and it does not go away.
enter image description here
So I have a search icon with this code:
function toggleSearch(){
$('.mobile-search-button').toggleClass('expand');
}
.mobile-search-button {
position: absolute;
top: 5px;
right: 15px;
width: 50px;
height: 50px;
border: none;
overflow: hidden;
}
.mobile-search-button * {
position: relative;
bottom: 4px;
left: 1px;
}
.search1 {
width: 12px;
height: 12px;
border: 2px solid black;
border-radius: 100px;
}
.search2 {
width: 10px;
height: 2px;
background: black;
-webkit-transform: rotate(45deg) translate(5px,-5px);
-ms-transform: rotate(45deg) translate(5px,-5px);
transform: rotate(45deg) translate(5px,-5px);
}
.search3 {
opacity: 0;
}
.mobile-search-button .search1 {
-webkit-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
-ms-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
transform: rotate(45deg) translate(5px,-5px) scale(1.75);
}
.mobile-search-button .search2 {
-webkit-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
-ms-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
transform: rotate(45deg) translate(19px,-9px) scale(1.75);
}
.mobile-search-button.expand .search1 {
-webkit-transform: rotate(45deg) translate(9px,-10px) scale(5);
-ms-transform: rotate(45deg) translate(9px,-10px) scale(5);
transform: rotate(45deg) translate(9px,-10px) scale(5);
opacity: 0;
}
.mobile-search-button.expand .search2 {
-webkit-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
-ms-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
}
.mobile-search-button.expand .search3 {
-webkit-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
-ms-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
<div class="search1"></div>
<div class="search2"></div>
<div class="search2 search3"></div>
</button>
UPDATE: I changed the height of div.search2 from 2px to 1.75px and it seems to work

I think the CSS could be done simpler.
function toggleSearch() {
$('.mobile-search-button').toggleClass('expand');
}
.mobile-search-button {
position: absolute;
top: 5px;
right: 15px;
width: 50px;
height: 50px;
border: none;
}
.search1,
.search2 {
background: black;
height: 36px;
left: 50%;
margin: -18px 0 0 -2px;
position: absolute;
transition: 200ms;
top: 50%;
width: 4px;
}
.search1 {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search2 {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.expand .search2 {
background: #dddddd;
border: 4px solid black;
border-radius: 100%;
height: 20px;
left: 7px;
margin: 0;
top: 6px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
<div class="search1"></div>
<div class="search2"></div>
</button>

css position pseudo elements stacking

Hello I use before & after in my element and it's work well, but the problem that when I set background-color for section the before & after will be disappear I know that this problem appear because of z-index: -1and I know that we can't stacking child element (before & after) above the parent element so what is the solution, I don't need to create any new elements to do this trick:
It's what I need:
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
}
.box-shadow-1{
height:200px;
background-color:#e8e8e8;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #777;
-webkit-box-shadow: 0 20px 20px #777;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

You need to give the box-shadow-1's parent a z-index, like this
.col-lg-11.col-lg-offset-1 {
position:relative;
z-index: 0;
}
I also adjusted your pseudo elements a little, so you get the shadow like the posted image
Stack snippet
section{
height:400px;
padding:30px 0;
background-color:#e8e8e8;
}
.col-lg-11.col-lg-offset-1 { /* added rule */
position:relative;
z-index: 0;
}
.box-shadow-1{
height:150px;
background-color:#00fb8f;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
height: 20px;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 30px 20px #777;
-webkit-box-shadow: 0 30px 20px #777;
box-shadow: 0 30px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

Is this what you are looking for?
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
}
.box-shadow-1{
height:200px;
position:relative;
}
.box-shadow-1 > div {
background-color:#e8e8e8;
height: 100%;
position: relative;
z-index: 10;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: 1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #777;
-webkit-box-shadow: 0 20px 20px #777;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
<div>Hello World</div>
</div>
</div>
</div>
</div>
</section>

I think the only way to achieve this is to send the <section> to the back and then bring the parent of .box-shadow1 forward like this,
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
z-index: -2;
}
.col-lg-11 {
z-index: 1;
}
As you can see below you achieve what you are looking for.
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
z-index: -2;
}
.col-lg-11 {
z-index: 1;
}
.box-shadow-1{
height:200px;
background-color:#e8e8e8;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #000;
-webkit-box-shadow: 0 20px 20px #000;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

Set a z-index value for the parent of box-shadow-1.
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
}
.box-shadow-1-parent {
position: relative;
z-index: 0;
}
.box-shadow-1 {
height:200px;
background-color:#e8e8e8;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #777;
-webkit-box-shadow: 0 20px 20px #777;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1 box-shadow-1-parent">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

How to draw heart with text in middle?

I found this answer "css: how to draw circle with text in middle?" , but I need the same, but with a heart shape. I found a lot of heart shape figures online, but none of this with text inside. At the same time, I need the heart only with borders, and when click, filled the background.
My code until now:
.heart {
width: 100px;
height: 90px;
font-size: 50px;
color: #fff;
line-height: 100px;
text-align: center;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="heart">Heart</div>

In order to get text to appear on the heart, you need to set the heart container as relative and the text inside of it as absolute as shown below.
I set the border of the :before and :after to give the heart a border.
The toggling of the fill uses functionality from YouMightNotNeedJQuery.com.
function toggleFill(heart, className) {
if (!hasClass(heart, className)) {
addClass(heart, className);
} else {
removeClass(heart, className);
}
}
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(
new RegExp('(^|\\b)' + className.split(' ').join('|') +
'(\\b|$)', 'gi'), ' ');
}
}
function hasClass(el, className) {
if (el.classList) {
return el.classList.contains(className);
} else {
return new RegExp('(^| )' + className +
'( |$)', 'gi').test(el.className);
}
}
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.filled:before,
.filled:after {
background: red !important;
}
#wrapper {
width: 300px;
height: 180px;
background: #444;
}
.heart {
position: relative;
top: calc(50% - 45px); /* 1/2 height of wrapper - 1/2 height of heart */
left: calc(50% - 50px); /* 1/2 width of wrapper - 1/2 width of heart */
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
top: 0px;
width: 50px;
height: 80px;
background: inherit;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
}
.heart:before {
left: 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart:after {
left: 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
border-right: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart-text {
position: absolute;
top: 0;
left: calc(50px - 30px); /* 1/2 width of heart - 1/2 width of text */
z-index: 100;
line-height: 66px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #FFF;
}
<div id="wrapper">
<div class="heart" onclick="toggleFill(this, 'filled')">
<div class="heart-text unselectable">
Heart
</div>
</div>
</div>

A quick search and there is a good article about creating shapes with CSS over # css-tricks.com that can be seen here.
If we take the example of how to create a heart and extend upon it a little we can get the following snippet that gives you a heart that starts out simply as a border;
(function(){
var heart = document.querySelector('#heart');
heart.addEventListener('click', function(e) {
this.className += ' is--filled'
});
}());
#heart {
position: relative;
width: 100px;
height: 90px;
text-align: center;
font-size: 16px;
position: relative;
}
#heart span {
width: 100%;
display: block;
top: 50%;
margin-top: -16px;
line-height: 16px;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
#heart.is--filled:before,
#heart.is--filled:after {
background-color: red;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border: 1px solid red;
transition: background-color .25s ease 0s;
-webkit-transition: background-color .25s ease 0s;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
#heart:before {
border-right: none;
border-bottom: none;
}
#heart:after {
border-left: none;
border-bottom: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id='heart'>
<span>Hey</span>
</div>
</body>
</html>
However, as someone else has mentioned in the comments it may be an easier approach to use images or the canvas element. I say this purely because it may prove difficult to get just the heart border you desire before clicking the heart (easier to see if you run the snippet). You could opt for much softer opaque background color before you click and then transition to red maybe?
Hope this helps you out!

Use pseudo elements of css3.
.text {
position: absolute;
color: #eee;
z-index: 99;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart">
<div class="text">ABC</div>
</div>

Use this
HTML
$('#change').click(function() {
var className = $(this).attr('class');
if(className == "heart"){
$(this).removeClass('heart');
$(this).addClass('heart1');
}
else{
$(this).removeClass('heart1');
$(this).addClass('heart');
}
});
.txt{
z-index:1;
font-size: 20px;
color: #000;
position:relative;
text-align:center;
top:15px;
right:5px;
}
.heart {
width: 100px;
height: 90px;
}
.heart1 {
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: yellow;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:before,
.heart1:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change" class="heart"><div class="txt">Heart</div></div>

Draw a circle with four segments

So, this question was posted for Androids, but I couldn't find anything relating to HTML/CSS/Javascript. How can I draw a circle with four different segments to interact with?
The level of interaction I'm looking for is simple enough - just something to accept hover and click commands. I've done a lot of looking and I can't come up with anything. I know how to create a circle, but not one with four different areas I can interact with. Can anyone help?

html:
<a id="s1"></a>
<a id="s2"></a>
<a id="s3"></a>
<a id="s4"></a>
css:
a{
display:inline-block;
width:50px;
height:50px;
background:green;
}
a:hover{
background:blue;
}
#s1{
position:absolute;
top:0px;
left:0px;
border-top-left-radius:50px;
}
#s2{
position:absolute;
top:0px;
left:50px;
border-top-right-radius:50px;
}
#s3{
position:absolute;
top:50px;
left:0px;
border-bottom-left-radius:50px;
}
#s4{
position:absolute;
top:50px;
left:50px;
border-bottom-right-radius:50px;
}
demo

Do you mean something like this , the concept is pretty easy.
.quarter-circle {
background-color:#c06;
height:150px;
width: 150px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
}
just stick 4 quarters in 1 wrap div like this
HTML:
<div id="wrap">
<p class="quarter-circle"></p>
<p class="quarter-circle fliph"></p>
<p class="quarter-circle flipv"></p>
<p class="quarter-circle fliphv"></p>
</div>
CSS:
#wrap
{
width:300px;
height:300px;
}
.fliph
{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flipv
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.fliphv
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1) scaleX(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.quarter-circle {
margin:0px;
background-color:#c06;
height:150px;
width: 150px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
position:relative;
display:inline-block;
float:left;
}

.c {
height: 20px;
width: 20px;
background-color: black;
position: absolute;
}
.c:hover {
background-color: red;
}
.tl {
top: 0;
left: 0;
border-top-left-radius: 20px;
}
.tr {
top: 0;
left: 20px;
border-top-right-radius: 20px;
}
.bl {
top: 20px;
left: 0;
border-bottom-left-radius: 20px;
}
.br {
top: 20px;
left: 20px;
border-bottom-right-radius: 20px;
}
<div class="c tl"></div><div class="c tr"></div><div class="c bl"></div><div class="c br"></div>

video lightbox links on a circle not working

I am trying to use code examples found here: Position icons into circle
in combination with a video lightbox plugin for wordpress.
The two seem to be negating each other.
I need to place images in a rough oval around a central logo and have each video be a link that opens a youtube video with a lightbox effect.
I cannot seem to figure out why the two things are breaking each other.
Advice on how to accomplish this would be greatly appreciated.
code is as follows...
HTML:
<!--[if lt IE 9]><div class="circle-container lt-ie9"><![endif]-->
<!--[if gte IE 9]><!--><div class="circle-container"><!--<![endif]-->
<img src="http://americanindustrialinc.com/wp/wp-content/uploads/2015/04/ProcessVideoThumb-e1428063665849.png">
<a href="https://www.youtube.com/watch?v=A1imGeNf8r0"
rel="wp-video-lightbox" class="deg0"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=DbZR9o29kI8"
rel="wp-video-lightbox" class="deg45"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=rDsZ2iWfYME"
rel="wp-video-lightbox" class="deg135"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=x_9Me6z2CZQ"
rel="wp-video-lightbox" class="deg180"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=Xn8uK-T0Fmg"
rel="wp-video-lightbox" class="deg225"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=torOo6h1_jM"
rel="wp-video-lightbox" class="deg315"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg"></a>
</div>
CSS:
/*images in a circle*/
.circle-container {
position: relative !important;
width: 24em !important;
height: 24em !important;
padding: 2.8em !important; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: dashed 0px !important;
border-radius: 50% !important;
margin: 1.75em auto 0 !important;
}
.circle-container a {
display: block !important;
overflow: hidden !important;
position: absolute !important;
top: 50%; left: 50% !important;
width: 4em; height: 4em !important;
margin: -2em !important; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img { display: block !important; width: 100% !important; }
.deg0 {
-webkit-transform: rotate(20deg) translate(12em) rotate(-85deg) !important
-moz-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
-ms-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
-o-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
} /* 12em = half the width of the wrapper */
.lt-ie9 .deg0 {
margin-left: 10em; !important
}
.deg45 {
-webkit-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
-moz-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
-ms-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
-o-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
}
.lt-ie9 .deg45 {
margin: 6.485em !important;
}
.deg135 {
-webkit-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
-moz-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
-ms-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
-o-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
}
.lt-ie9 .deg135 {
margin: 6.485em -10.485em !important;
}
.deg180 {
-webkit-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
-moz-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
-ms-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
-o-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
}
.lt-ie9 .deg180 {
margin-left: -14em !important;
}
.deg225 {
-webkit-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
-moz-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
-ms-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
-o-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
}
.lt-ie9 .deg225 {
margin: -10.485em !important;
}
.deg315 {
-webkit-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
-moz-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
-ms-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
-o-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
}
.lt-ie9 .deg315 {
margin: -10.485em 6.485em !important;
}
/* this is just for showing the angle on hover */
.circle-container a:not(.center):before {
position: absolute;
width: 4em;
color: white;
opacity: 0;
background: rgba(0,0,0,.5);
font: 1.25em/3.45 Courier, monospace;
letter-spacing: 2px;
text-decoration: none;
text-indent: -2em;
text-shadow: 0 0 .1em deeppink;
transition: .7s; /* only works in Firefox */
content: attr(class)'°';
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 0px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after { opacity: 1; }
.circle-container a:not(.center):after {
position: absolute;
top: 50%; left: 50%;
width: 4px; height: 4px;
border-radius: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: deeppink;
opacity: .3;
content: '';
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }
/*end circle of images*/
My limited experience is not finding a solution.
please help.
I have tried many things (including replacing quotations (") with single ticks (') as used in the referenced thread. I have tried removing support for older IE versions.
browser i am testing in is chrome. also tested in FF.
testpage is http://americanindustrialinc.com/circlepage/

I am an idiot. The entire problem was that i accidentally put line breaks in each anchor string.