• Locked
1 reply [Last post]
Tue, 2015-05-12 22:44
eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 5 years 15 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Hi There,
I'm working with a simple CSS image gallery I found online, but instead of using thumbnail images, I've decided to use text links to trigger the large image in the viewer.

Also, the code is set up to put the 'thumbnails' above the viewer. I need to put my trigger links beneath it. I understand how to use positioning to pull the big viewer UP, but it covers up my text links and I don't know how to push them down. My working page is at:

http://roadstardesign.com/prelaunch/gallery/

Here is the code:

<div class="container">
 
    <a href="#">
            <p class="thumb">Territory by Salesperson</p>
            <img class="big" src="maps/salespeople.gif">
    </a>
 
   <br />
   <br />
 
    <a href="#">
        <p class="thumb">BMI</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
 
    <a href="#">
        <p class="thumb">Cambion</p>
        <img class="big" src="maps/cambion.gif">
    </a>
    <a href="#">
        <p class="thumb">Conesys</p>
        <img class="big" src="maps/conesys.gif">
    </a>
 
        <a href="#">
        <p class="thumb">Cristek</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
        <a href="#">
        <p class="thumb">Exxelia Dearborn</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
        <a href="#">
        <p class="thumb">Harwin</p>
        <img class="big" src="maps/harwin.gif">
    </a>
        <a href="#">
        <p class="thumb">RAF Tabtronics (New!)</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
        <a href="#">
        <p class="thumb">Temex</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
        <a href="#">
        <p class="thumb">IEH</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
        <a href="#">
        <p class="thumb">Semiconductor Circuits</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
        <a href="#">
        <p class="thumb">VMR</p>
        <img class="big" src="maps/all_territories.gif">
    </a>
 
    <a href="#">
        <img class="big featured" src="maps/holder.gif">
    </a>
</div>
 
</body>

and here is the CSS:

.container {
  position: relative;
  height: 660px;
  width: 675px;
  overflow: hidden;
  margin: 0 auto;
}
 
.container a {
  margin: 20px;
  color: #a8b7e2;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-align: center;
}
 
.container p {margin-bottom: -10px;}
 
.big {
  position: absolute;
  top: 900px;
  left: 20px;
 
  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
  -ms-transition: top 1s ease;
  transition: top 1s ease;
}
 
.featured {
  top: 260px;
  left: 20px;
  z-index: -3;
}
 
a:hover .thumb {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
 
a:hover .big {
  top: 260px;
}

I know this is pretty basic, but I'd love some pointers so I can figure this out. Thanks much in advance.
-Bill

Top
Tags:
Wed, 2015-05-13 01:34
#1
eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 5 years 15 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Solved this (for the most

Solved this (for the most part). Just had to use relative positioning on the links to bring them down underneath the image. Problem now, is that the ghosted links are still triggering where they used to sit in the document order.

Top
  • Locked