<div class="main-content"> <img class="main-img" src="http://salcriscione.com/portfolio/Code/Charts/Chart%20Table.png" alt="" usemap="#Map" /> <map name="Map" id="Map"> <area class="Row1Col1-shape" href="#" shape="poly" coords="318,49,438,50,438,100,317,101" /> <area class="Row1Col2-shape" href="#" shape="poly" coords="440,50,559,50,559,101,440,100" /> <area class="Row1Col3-shape" href="#" shape="poly" coords="561,50,681,49,681,101,561,102" /> <area class="Row2Col1-shape" href="#" shape="poly" coords="317,103,439,102,438,191,318,191" /> <area class="Row2Col2a-shape" href="#" shape="poly" coords="441,102,559,103,559,143,440,143" /> <area class="Row2Col2b-shape" href="#" shape="poly" coords="561,144,559,192,440,191,440,145" /> <area class="Row2Col3a-shape" href="#" shape="poly" coords="562,104,681,104,682,143,561,142" /> <area class="Row2Col3b-shape" href="#" shape="poly" coords="563,145,682,145,682,191,561,192" /> <area class="Row3Col1-shape" href="#" shape="poly" coords="318,193,438,194,437,283,317,282" /> <area class="Row3Col2a-shape" href="#" shape="poly" coords="441,193,560,194,560,239,440,239" /> <area class="Row3Col2b-shape" href="#" shape="poly" coords="441,241,560,241,560,282,439,283" /> <area class="Row3Col3-shape" href="#" shape="poly" coords="562,194,682,193,682,283,563,282" /> <area class="Row4Col1-shape" href="#" shape="poly" coords="319,283,439,286,438,373,318,374" /> <area class="Row4Col2-shape" href="#" shape="poly" coords="441,283,561,284,560,373,440,375" /> <area class="Row4Col3-shape" href="#" shape="poly" coords="563,284,681,285,681,373,563,373" /> <area class="Row5Col1-shape" href="#" shape="poly" coords="317,376,436,374,438,504,317,505" /> <area class="Row5Col2-shape" href="#" shape="poly" coords="440,377,560,376,560,503,440,504" /> <area class="Row5Col3-shape" href="#" shape="poly" coords="563,376,682,375,681,504,562,504" /> </map> <img class="chart-img Row1Col1-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%201%20Col%201.png"> <img class="chart-img Row1Col2-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%201%20Col%202.png"> <img class="chart-img Row1Col3-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%201%20Col%203.png"> <img class="chart-img Row2Col1-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%202%20Col%201.png"> <img class="chart-img Row2Col2a-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%202%20Col%202a.png"> <img class="chart-img Row2Col2b-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%202%20Col%202b.png"> <img class="chart-img Row2Col3a-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%202%20Col%203a.png"> <img class="chart-img Row2Col3b-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%202%20Col%203b.png"> <img class="chart-img Row3Col1-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%203%20Col%201.png"> <img class="chart-img Row3Col2a-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%203%20Col%202a.png"> <img class="chart-img Row3Col2b-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%203%20Col%202b.png"> <img class="chart-img Row3Col3-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%203%20Col%203.png"> <img class="chart-img Row4Col1-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%204%20Col%201.png"> <img class="chart-img Row4Col2-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%204%20Col%202.png"> <img class="chart-img Row4Col3-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%204%20Col%203.png"> <img class="chart-img Row5Col1-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%205%20Col%201.png"> <img class="chart-img Row5Col2-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%205%20Col%202.png"> <img class="chart-img Row5Col3-img" src="http://salcriscione.com/portfolio/Code/Charts/Row%205%20Col%203.png"> </div>
.main-img { opacity: 1; } .show { z-index: -1 !important; } .hide { opacity: 0; } .chart-img { position: absolute; top: 0px; left: 0px; z-index: -10; } .main-content { position: relative; width: 700px; margin: 0 auto; } .main-content:before { position: absolute; z-index: 100; display: block; width: 100%; height: calc(100% - 200px); background: rgba(51, 51, 51, 0.7); content: "Hover to see Charts"; color: #fff; text-align: center; padding-top: 200px; font-size: 48px; transition-delay: 4s; } .main-content:hover:before { z-index: -1; transition-delay: 0s; }