CSS image button not available
Like for the arrow button at the bottom of the information fields, when you click on them nothing happens, but when you click next to them the slide falls down? The arrows on the slide work great if you click directly on them, just on the main div that they don't work as expected. Also, why do you end up at the top of the page when you click to open / close the sliders? Anyone have any ideas what's going on? Everything helps, welcomes.
function findAncestor(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
function open(e) {
let li = e.target.parentNode.parentNode.parentNode;
li.classList.add('hover');
}
function close(e) {
const hoverable = findAncestor(e.target, 'hover');
hoverable.classList.remove('hover');
}
const infoBoxListItems = [].slice.call(document.querySelectorAll('.open'));
const closeButtons = [].slice.call(document.querySelectorAll('.close'));
infoBoxListItems.forEach(function(elm) {
elm.addEventListener('click', open);
});
closeButtons.forEach(function(btn) {
btn.addEventListener('click', close);
});
.everything {
text-align:center;
min-height:775px;
}
.everything:hover {
cursor: default;
}
#wrapper {
margin: 0 auto;
}
#wrapper img{
width:100%;
}
.infobox-list {
display: inline-block;
text-align: center;
}
ul, ol, li {
margin: 0;
padding: 0;
list-style-position: outside;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset {
margin: 0;
padding: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.hr {
border-color:rgba(255,255,255,0.3);
width: 210px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
background-color: #fff;
color: #555;
min-width: 20em;
}
.info-boxes li {
width: 320px;
height: 550px;
background: rgba(255,255,255,0.3);
border: 1px solid rgba(21,100,102,0.35);
border-radius: 4px;
margin: 0 0px 0px;
cursor:pointer;
position: relative;
overflow: hidden;
transform: scale(0.75);
}
.ptext
{
font-family:Verdana;
text-align:center;
font-size:24px;
color:#156466;
}
.profile
{
margin-top:10%;
margin-left:1px;
width:85px;
height:85px;
}
.learning
{
margin-top:10%;
width:85px;
height:85px;
}
.performance
{
margin-left:1px;
margin-top:10%;
width:85px;
height:85px;
}
.team
{
margin-top:10%;
width:85px;
height:85px;
}
.smallicons
{
width:60px;
height:60px;
}
.close {
font-size:25px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 2.35rem;
text-align: center;
}
.open {
font-size:25px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.openimg {
height:20px;
width:20px;
}
.closeimg {
height:20px;
width:20px;
}
.infobox-list li {
display: inline-block;
}
a {
color: white;
text-decoration: none;
font-weight:lighter;
}
.info-boxes li .infobox {
display: table-cell;
text-align:center;
vertical-align: middle;
height: 550px;
width: 320px;
}
.info-boxes li .infobox:before {
content: '';
position: absolute;
left: 20%;
width: 160%;
height: 188%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.2);
top: 0;
-webkit-transform: rotate(46deg);
-moz-transform: rotate(46deg);
transform: rotate(30deg);
}
.info-boxes li.hover .shade {
animation-name: windowshade;
cursor:pointer;
}
.info-boxes li .shade,
.info-boxes li.hover .shade {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
section p {
line-height: 1.3em;
color: #6d6e71;
width: 100%;
padding: 0 10px;
margin-top: 5px;
margin-left: 0px;
text-align:left;
}
p {
display: block;
}
.info-boxes li .shade {
position: absolute;
width: 320px;
height: 570px;
left: 0;
top: 0;
background-color: #156466;
color: #fff;
display: table;
vertical-align: middle;
padding: 20px 10px 0;
transform: translateY(-340px);
animation-name: windowshade-out;
}
.info-boxes li .shade h3 {
color: #fff;
padding: 10px;
font-weight: bold
}
.info-boxes li .shade p {
color: #fff;
margin-top:23px;
line-height: 1.5em;
font-weight: lighter;
}
section a {
line-height: 2em;
color: #6d6e71;
width: 100%;
padding: 0 10px;
margin-top: 13px;
margin-left: 0px;
text-align:left;
}
a {
display:block;
}
.info-boxes li .shade a {
text-align:left;
color: #fff;
line-height: 1.5em;
font-weight: lighter;
}
.info-boxes li .shade a:hover {
text-decoration:underline;
}
.ie9 .info-boxes li.hover .shade {
top: 245px
}
.info-boxes li.hover a {
text-decoration: none
}
@keyframes windowshade {
0% {
transform: translateY(-550px)
}
100% {
transform: translateY(0)
}
}
@keyframes windowshade-out {
0% {
transform: translateY(0)
}
100% {
transform: translateY(-550px)
}
}
.button_slide {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
padding: 18px 30px;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom:20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_down:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
/* extend left padding */
padding: 18px 15px 18px 62px;
position: relative;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom: 20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_downhr:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr:after {
content: "";
display: inline-block;
position: absolute;
left: 10px;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 80%;
}
.slide_downhr:hover:after {
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498065514/iconhr_oz4fvo.png);
}
<div class="everything">
<br style="line-height:15px;">
<section class="info-boxes">
<ul class="infobox-list">
<li>
<a href="#">
<div class="infobox">
<table>
<tr>
<img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Profile-Icon_oy7oxz.png"></tr>
<tr>
<p class="ptext">My Profile</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/dash/profile/personalProfileManager?userid=NWTMP0001">About Me</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/person/resume?userid=NWTMP0001">Resume</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td>
<td>
<a href="">Accountabilities
</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Chnage-Password-Icon_noszkb.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/changepassword">Change Password</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Sign-Out-Icon_twkoy7.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Broker/Account/Login.aspx?wtrealm=https%3a%2f%2fNORTHWESTCOMP.stage.sumtotal.host%2fcore%2f&ReturnUrl=http%3a%2f%2fnorthwestcomp.stage.sumtotal.host%2fbroker%2fToken%2fSaml11.ashx%3fwa%3dwsignin1.0%26wtrealm%3dhttps%253a%252f%252fNORTHWESTCOMP.stage.sumtotal.host%252fcore%252f%26wreply%3dhttps%253a%252f%252fnorthwestcomp.stage.sumtotal.host%252fCore%252f%252f&domainid=52160A28FC58BBBE7D714E075077AC76">Sign Out</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="infobox">
<table>
<tr>
<img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Learning-Icon_gjy2yx.png"></tr>
<tr>
<p class="ptext">My Learning</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2Fnorthwestcomp.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Training.aspx%3FUserMode%3D0">Training Schedule</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-History_czttv1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_LearnerReports.aspx%3FUserMode%3D0%26Mode%3D1">Training History</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Evaluation.aspx%3FUserMode%3D0%26Mode%3D0">Course Feedback</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Ftaxonomy%2FTAX_Fav.aspx%3FUserMode%3D0">Training Favourites
</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
<td>
<a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-learning/Pages/default.aspx">Learning Resources</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="infobox">
<table>
<tr>
<img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Performance-Icon_dpjwzn.png"></tr>
<tr>
<p class="ptext">My Performance</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Fmatrixgoallist%26sdatanavid%3Dmygoals%26sdatanavroot%3D1%26sdatanavnmcd%3D61428%26sdatatypcd%3D5005%26sdataaction%3Dview%26matrixgoallist_sortcolumn%3Dsdb_matrixgoal_goaldesctxt%26matrixgoallist_sortorder%3DASC%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmygoals">Goals</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Ftasklst%26crit_taskview_modulecd%3Dperformance%26ttlnmcd%3D12507%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmyassessments">Effectiveness Assessment</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/devplan">Development Plan</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td>
<td>
<a href="">Feedback</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
<td>
<a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-performance/Pages/default.aspx">Performance Resources
</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="infobox">
<table>
<tr>
<img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/TeamIcon_czfdps.png"></tr>
<tr>
<p class="ptext">My Team</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/organization">Team</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_DevPlan.aspx%253fUserMode%253d1%2526Mode%253d1">Team Development</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Training-cimpliance-icon_qlcqha.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_LearnerHome.aspx%253fUserMode%253d1">Training Compliance</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
<td>
<a href="http://wearenorthwest.northwest.ca/departments/humanresources/Your-Employment-And-Well-Being/manager-toolkit/Pages/default.aspx">Manager Toolkit
</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
</ul>
</section>
</div>
source to share
--- Update I used the .closest () function mentioned in another answer.
I added the .parentNode parameter to the public function because it was one level deeper than the original element that pointed to ".shade".
function findAncestor(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
function open(e) {
let li = e.target.closest('li');
li.classList.add('hover');
}
function close(e) {
const hoverable = e.target.closest('li');
hoverable.classList.remove('hover');
}
const infoBoxListItems = [].slice.call(document.querySelectorAll('.open'));
const closeButtons = [].slice.call(document.querySelectorAll('.close'));
infoBoxListItems.forEach(function(elm) {
elm.addEventListener('click', open);
});
closeButtons.forEach(function(btn) {
btn.addEventListener('click', close);
});
.everything {
text-align:center;
min-height:775px;
}
.everything:hover {
cursor: default;
}
#wrapper {
margin: 0 auto;
}
#wrapper img{
width:100%;
}
.infobox-list {
display: inline-block;
text-align: center;
}
ul, ol, li {
margin: 0;
padding: 0;
list-style-position: outside;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset {
margin: 0;
padding: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.hr {
border-color:rgba(255,255,255,0.3);
width: 210px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
background-color: #fff;
color: #555;
min-width: 20em;
}
.info-boxes li {
width: 320px;
height: 550px;
background: rgba(255,255,255,0.3);
border: 1px solid rgba(21,100,102,0.35);
border-radius: 4px;
margin: 0 0px 0px;
cursor:pointer;
position: relative;
overflow: hidden;
transform: scale(0.75);
}
.ptext
{
font-family:Verdana;
text-align:center;
font-size:24px;
color:#156466;
}
.profile
{
margin-top:10%;
margin-left:1px;
width:85px;
height:85px;
}
.learning
{
margin-top:10%;
width:85px;
height:85px;
}
.performance
{
margin-left:1px;
margin-top:10%;
width:85px;
height:85px;
}
.team
{
margin-top:10%;
width:85px;
height:85px;
}
.smallicons
{
width:60px;
height:60px;
}
.close {
font-size:25px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 2.35rem;
text-align: center;
}
.open {
font-size:25px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.openimg {
height:20px;
width:20px;
}
.closeimg {
height:20px;
width:20px;
}
.infobox-list li {
display: inline-block;
}
a {
color: white;
text-decoration: none;
font-weight:lighter;
}
.info-boxes li .infobox {
display: table-cell;
text-align:center;
vertical-align: middle;
height: 550px;
width: 320px;
}
.info-boxes li .infobox:before {
content: '';
position: absolute;
left: 20%;
width: 160%;
height: 188%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.2);
top: 0;
-webkit-transform: rotate(46deg);
-moz-transform: rotate(46deg);
transform: rotate(30deg);
}
.info-boxes li.hover .shade {
animation-name: windowshade;
cursor:pointer;
}
.info-boxes li .shade,
.info-boxes li.hover .shade {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
section p {
line-height: 1.3em;
color: #6d6e71;
width: 100%;
padding: 0 10px;
margin-top: 5px;
margin-left: 0px;
text-align:left;
}
p {
display: block;
}
.info-boxes li .shade {
position: absolute;
width: 320px;
height: 570px;
left: 0;
top: 0;
background-color: #156466;
color: #fff;
display: table;
vertical-align: middle;
padding: 20px 10px 0;
transform: translateY(-340px);
animation-name: windowshade-out;
}
.info-boxes li .shade h3 {
color: #fff;
padding: 10px;
font-weight: bold
}
.info-boxes li .shade p {
color: #fff;
margin-top:23px;
line-height: 1.5em;
font-weight: lighter;
}
section a {
line-height: 2em;
color: #6d6e71;
width: 100%;
padding: 0 10px;
margin-top: 13px;
margin-left: 0px;
text-align:left;
}
a {
display:block;
}
.info-boxes li .shade a {
text-align:left;
color: #fff;
line-height: 1.5em;
font-weight: lighter;
}
.info-boxes li .shade a:hover {
text-decoration:underline;
}
.ie9 .info-boxes li.hover .shade {
top: 245px
}
.info-boxes li.hover a {
text-decoration: none
}
@keyframes windowshade {
0% {
transform: translateY(-550px)
}
100% {
transform: translateY(0)
}
}
@keyframes windowshade-out {
0% {
transform: translateY(0)
}
100% {
transform: translateY(-550px)
}
}
.button_slide {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
padding: 18px 30px;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom:20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_down:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
/* extend left padding */
padding: 18px 15px 18px 62px;
position: relative;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom: 20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_downhr:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr:after {
content: "";
display: inline-block;
position: absolute;
left: 10px;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 80%;
}
.slide_downhr:hover:after {
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498065514/iconhr_oz4fvo.png);
}
<div class="everything">
<br style="line-height:15px;">
<section class="info-boxes">
<ul class="infobox-list">
<li class="">
<a href="javascript:void(0)">
<div class="infobox">
<table>
<tr>
<img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Profile-Icon_oy7oxz.png"></tr>
<tr>
<p class="ptext">My Profile</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/dash/profile/personalProfileManager?userid=NWTMP0001">About Me</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/person/resume?userid=NWTMP0001">Resume</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td>
<td>
<a href="">Accountabilities
</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Chnage-Password-Icon_noszkb.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/changepassword">Change Password</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Sign-Out-Icon_twkoy7.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Broker/Account/Login.aspx?wtrealm=https%3a%2f%2fNORTHWESTCOMP.stage.sumtotal.host%2fcore%2f&ReturnUrl=http%3a%2f%2fnorthwestcomp.stage.sumtotal.host%2fbroker%2fToken%2fSaml11.ashx%3fwa%3dwsignin1.0%26wtrealm%3dhttps%253a%252f%252fNORTHWESTCOMP.stage.sumtotal.host%252fcore%252f%26wreply%3dhttps%253a%252f%252fnorthwestcomp.stage.sumtotal.host%252fCore%252f%252f&domainid=52160A28FC58BBBE7D714E075077AC76">Sign Out</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="infobox">
<table>
<tr>
<img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Learning-Icon_gjy2yx.png"></tr>
<tr>
<p class="ptext">My Learning</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2Fnorthwestcomp.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Training.aspx%3FUserMode%3D0">Training Schedule</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-History_czttv1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_LearnerReports.aspx%3FUserMode%3D0%26Mode%3D1">Training History</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Evaluation.aspx%3FUserMode%3D0%26Mode%3D0">Course Feedback</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Ftaxonomy%2FTAX_Fav.aspx%3FUserMode%3D0">Training Favourites
</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
<td>
<a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-learning/Pages/default.aspx">Learning Resources</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="infobox">
<table>
<tr>
<img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Performance-Icon_dpjwzn.png"></tr>
<tr>
<p class="ptext">My Performance</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Fmatrixgoallist%26sdatanavid%3Dmygoals%26sdatanavroot%3D1%26sdatanavnmcd%3D61428%26sdatatypcd%3D5005%26sdataaction%3Dview%26matrixgoallist_sortcolumn%3Dsdb_matrixgoal_goaldesctxt%26matrixgoallist_sortorder%3DASC%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmygoals">Goals</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Ftasklst%26crit_taskview_modulecd%3Dperformance%26ttlnmcd%3D12507%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmyassessments">Effectiveness Assessment</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/devplan">Development Plan</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td>
<td>
<a href="">Feedback</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
<td>
<a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-performance/Pages/default.aspx">Performance Resources
</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="infobox">
<table>
<tr>
<img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/TeamIcon_czfdps.png"></tr>
<tr>
<p class="ptext">My Team</p>
</tr>
</table>
<div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/organization">Team</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_DevPlan.aspx%253fUserMode%253d1%2526Mode%253d1">Team Development</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Training-cimpliance-icon_qlcqha.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_LearnerHome.aspx%253fUserMode%253d1">Training Compliance</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
<td>
<a href="http://wearenorthwest.northwest.ca/departments/humanresources/Your-Employment-And-Well-Being/manager-toolkit/Pages/default.aspx">Manager Toolkit
</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div>
</div>
</a>
</li>
</ul>
</section>
</div>
source to share
Change the "hardcoded" nested .parentNode
to a more flexible way, for example .closest()
, which allows you to search for the closest ancestor https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
function open(e) {
let li = e.target.closest('li');
li.classList.add('hover');
}
function close(e) {
const hoverable = e.target.closest('li');
hoverable.classList.remove('hover');
}
source to share
function findAncestor(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
function open(e) {
let li = e.target.parentNode.parentNode.parentNode;
li.classList.add('hover');
}
function close(e) {
const hoverable = findAncestor(e.target, 'hover');
hoverable.classList.remove('hover');
}
const infoBoxListItems = [].slice.call(document.querySelectorAll('.open'));
const closeButtons = [].slice.call(document.querySelectorAll('.close'));
infoBoxListItems.forEach(function(elm) {
elm.addEventListener('click', open);
});
closeButtons.forEach(function(btn) {
btn.addEventListener('click', close);
});
.everything {
text-align:center;
min-height:775px;
}
.everything:hover {
cursor: default;
}
#wrapper {
margin: 0 auto;
}
#wrapper img{
width:100%;
}
.infobox-list {
display: inline-block;
text-align: center;
}
ul, ol, li {
margin: 0;
padding: 0;
list-style-position: outside;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset {
margin: 0;
padding: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.hr {
border-color:rgba(255,255,255,0.3);
width: 210px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
background-color: #fff;
color: #555;
min-width: 20em;
}
.info-boxes li {
width: 320px;
height: 550px;
background: rgba(255,255,255,0.3);
border: 1px solid rgba(21,100,102,0.35);
border-radius: 4px;
margin: 0 0px 0px;
cursor:pointer;
position: relative;
overflow: hidden;
transform: scale(0.75);
}
.ptext
{
font-family:Verdana;
text-align:center;
font-size:24px;
color:#156466;
}
.profile
{
margin-top:10%;
margin-left:1px;
width:85px;
height:85px;
}
.learning
{
margin-top:10%;
width:85px;
height:85px;
}
.performance
{
margin-left:1px;
margin-top:10%;
width:85px;
height:85px;
}
.team
{
margin-top:10%;
width:85px;
height:85px;
}
.smallicons
{
width:60px;
height:60px;
}
.close {
font-size:25px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 2.35rem;
text-align: center;
}
.open {
font-size:25px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.openimg {
height:20px;
width:20px;
}
.closeimg {
height:20px;
width:20px;
}
.infobox-list li {
display: inline-block;
}
a {
color: white;
text-decoration: none;
font-weight:lighter;
}
.info-boxes li .infobox {
display: table-cell;
text-align:center;
vertical-align: middle;
height: 550px;
width: 320px;
}
.info-boxes li .infobox:before {
content: '';
position: absolute;
left: 20%;
width: 160%;
height: 188%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.2);
top: 0;
-webkit-transform: rotate(46deg);
-moz-transform: rotate(46deg);
transform: rotate(30deg);
}
.info-boxes li.hover .shade {
animation-name: windowshade;
cursor:pointer;
}
.info-boxes li .shade,
.info-boxes li.hover .shade {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
section p {
line-height: 1.3em;
color: #6d6e71;
width: 100%;
padding: 0 10px;
margin-top: 5px;
margin-left: 0px;
text-align:left;
}
p {
display: block;
}
.info-boxes li .shade {
position: absolute;
width: 320px;
height: 570px;
left: 0;
top: 0;
background-color: #156466;
color: #fff;
display: table;
vertical-align: middle;
padding: 20px 10px 0;
transform: translateY(-340px);
animation-name: windowshade-out;
}
.info-boxes li .shade h3 {
color: #fff;
padding: 10px;
font-weight: bold
}
.info-boxes li .shade p {
color: #fff;
margin-top:23px;
line-height: 1.5em;
font-weight: lighter;
}
section a {
line-height: 2em;
color: #6d6e71;
width: 100%;
padding: 0 10px;
margin-top: 13px;
margin-left: 0px;
text-align:left;
}
a {
display:block;
}
.info-boxes li .shade a {
text-align:left;
color: #fff;
line-height: 1.5em;
font-weight: lighter;
}
.info-boxes li .shade a:hover {
text-decoration:underline;
}
.ie9 .info-boxes li.hover .shade {
top: 245px
}
.info-boxes li.hover a {
text-decoration: none
}
@keyframes windowshade {
0% {
transform: translateY(-550px)
}
100% {
transform: translateY(0)
}
}
@keyframes windowshade-out {
0% {
transform: translateY(0)
}
100% {
transform: translateY(-550px)
}
}
.button_slide {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
padding: 18px 30px;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom:20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_down:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
/* extend left padding */
padding: 18px 15px 18px 62px;
position: relative;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom: 20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_downhr:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr:after {
content: "";
display: inline-block;
position: absolute;
left: 10px;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 80%;
}
.slide_downhr:hover:after {
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498065514/iconhr_oz4fvo.png);
}
.open::before {
content: "";
background: url("http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png");
height: 20px;
width: 20px;
display: inline-block;
background-size: contain;
}
.close::before {
content: "";
background: url("http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png");
height: 20px;
width: 20px;
display: inline-block;
background-size: contain;
}
<div class="everything">
<br style="line-height:15px;">
<section class="info-boxes">
<ul class="infobox-list">
<li>
<a href="javascript:void(0);">
<div class="infobox">
<table>
<tr>
<img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Profile-Icon_oy7oxz.png"></tr>
<tr>
<p class="ptext">My Profile</p>
</tr>
</table>
<div class="open"></div>
</div>
<div class="shade">
<table>
<tr>
<td>
<img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png">
</td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/dash/profile/personalProfileManager?userid=NWTMP0001">About Me</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/person/resume?userid=NWTMP0001">Resume</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td>
<td>
<a href="">Accountabilities
</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Chnage-Password-Icon_noszkb.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Core/changepassword">Change Password</a>
<hr class="hr">
</td>
</tr>
<tr>
<td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Sign-Out-Icon_twkoy7.png"> </td>
<td>
<a href="https://northwestcomp.stage.sumtotal.host/Broker/Account/Login.aspx?wtrealm=https%3a%2f%2fNORTHWESTCOMP.stage.sumtotal.host%2fcore%2f&ReturnUrl=http%3a%2f%2fnorthwestcomp.stage.sumtotal.host%2fbroker%2fToken%2fSaml11.ashx%3fwa%3dwsignin1.0%26wtrealm%3dhttps%253a%252f%252fNORTHWESTCOMP.stage.sumtotal.host%252fcore%252f%26wreply%3dhttps%253a%252f%252fnorthwestcomp.stage.sumtotal.host%252fCore%252f%252f&domainid=52160A28FC58BBBE7D714E075077AC76">Sign Out</a>
<hr class="hr">
</td>
</tr>
</table>
<div class="close"></div>
</div>
</a>
</li>
</ul>
</section>
</div>
You can do it directly via css.
You can go with this code here.
Removed
Image from open and closed div
Update
I use open::before
and close::before
for the background image.
Hope this helps you :)
Update
replaced
#
withjavasctipt:void(0);
in the taga
. it will stop scrolling when you press the open or close button.
source to share