POP UP CODE REFERENCE

=========================== CSS REFERENCE ==========================



-------------------- FIXED DIV CODE ----------------
(SETS UP CODE FOUNDATION)
#quince{
position: absolute;
top: 514px;
left: 800px;
width: 220px;
height: 160px;
padding:10px;
word-spacing:1px;
letter-spacing:0px;
background-color: #38283d;
text-align:center;
z-index:1;
overflow:hidden;
}

-------------- HOVER EFFECT ------------------

(HOVER EFFECT FOR AN IMG OR JUST AN A HREF)
.hovereffect2 img {

display: inline-block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect2 h3 {
top:60px;
text-align:center;
position:relative;
background: #01a8d6;
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}

.hovereffect2 a.info {
text-decoration:none;
display:inline-block;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:100px 0 0;
padding:7px 14px;
}

.hovereffect2 a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect2:hover img {
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}

.hovereffect2:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect2:hover h3,.hovereffect2:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect2:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}

-------------  a href coding for link --------------------

(take out the image aspect of this coding and just apply it to the link itself when working inside of it)
(NO WIDTH OR HEIGHT ON .CLASS WITHOUT TARGET,  ONLY PUT WIDTH AND HEIGHT ON TARGET CSS CODE)

.editorthree {
position: fixed;
top: 514px;
left: 684px;
width:0px;
height:0px;
overflow:hidden;
z-index:2222;
opacity:0;
filter: alpha(opacity=0.0);
background-color: #38283d;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;}

.editorthree:target {
top: 200px;
left: 350px;
width: 550px;
height: 200px;
padding:10px;
opacity:1;
filter:alpha(opacity1);
background-color: #38283d;
text-align: left;
-webkit-box-shadow: -1px 4px 100px 500px rgba(0, 0, 0,0.33);
-moz-box-shadow: -1px 4px 100px 500px rgba(0, 0, 0,0.33);
box-shadow: -1px 4px 100px 500px rgba(0, 0, 0,0.33);
}
--------------------------------- img aspect of code which doesn't apply to what I am trying to do but to have it wouldn't hurt----

.most img {
display: inline-block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.most img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}


=============================  HTML REFERENCE =====================================

<div ID="quince"> <!-----FOUNDATION OF THE DISPLAY WINDOW UPON FIRST LOOK------->

<!----- WHEN YOU HOVER OVER THE PHOTO/AHREF AND IT DOES THE GREY EFFECT------>
<div class="hovereffect2" style="display:inline-block;">
<a href="#editorthree" title="click" class="most"><img class="img-responsive" width="210px" height="150px" style="background-color:#91718c; margin:5px;" src="https://i.imgur.com/REnqcLv.gif"></a>
<div class="overlay">
<h3>enchantress</h3>
</div>
</div>

</div>

<!----THE #DIV BELOW IS CONNECTED TO THE A-REF ABOVE, IT IS NOT FEATURED IN THE CSS CODING BUT ONLY CONNECTED TO THE .HOVEREFFECT2 DIV BOX, KEEEEP DAT IN MIND BETCH------>  <!----------THESE CODES ARE FOR THE POP UP WINDOW CODE, A HREF FIRST FOR THE CLOSE BOX, ANYTHING AFTER THESE DIVS CAN BE EDITED ANYWAY WITHIN THE HTML-------------->
<div id="editorthree" class="editorthree">

<a href="#" style="display:block; margin:2px; text-align:right; backgrond-color:#000000;">✖ close</a>

<h4>enchantress</h4>

<div style="float:left; padding:5px; width: 260px; height: 130px; background-color: #2e101d; border-top:1px solid #57262a; border-bottom:1px solid #57262a; margin: 14px 2px 2px 2px; overflow: auto;text-align:justify;">

<h2>guidelines and about</h2>
</br>

<first>A</first>ll I ask is that you read and sign ALL rules thoroughly and have patience with all our staff. We want to help you and we're here to help you.<br><br>Please have patience with us all, we're doing our best to get things done in a timely manner.<br><br>

<b>Name:</b> Enchantress.<br>
<strong>Title:</strong> Webmaster/Editor.<br>
<tt>Duties:</tt> Editing, coding, helping anyone with codes if they need it, & helping J and HQ with anything to keep the site running smoothly.<br>
<b>Editing Software:</b> Photoshop CC.<br>
<strong>Strengths:</strong> doorknockers, extra & simple edited defaults, headlines, manips, main layouts,<br>
<tt>Weakness:</tt> textures, psds, blog layouts, crackships .<br>
<b>Years in RP:</b> 12 years
<br><br>
1.)  Please do add credit to all photos made by me.<br>
2.)  Do <b>not</b> copy, steal or redistribute to anyone. <br>
3.)  Respect breeds respect, so please always be respectful of your editor. <br>
4.)  Keep all edits public and credited, thanks! <br>

</div>

<div style="float:right; padding:5px; width: 260px; height: 130px; background-color: #2e101d; border-top:1px solid #57262a; border-bottom:1px solid #57262a; margin: 14px 2px 2px 2px; overflow: auto;text-align:justify;">

<h3>monthly custom deals</h3>
</br>

<first>L</first>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..<br><br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
</div>