ryanforprez
Coder
I want when I hover over my text for the image to appear in the top left while the text is in the bottom left. I have it so now when I hover it moves the text underneath down and makes it difficult to navigate. When I change the padding it moves all the text with it.
HTML:
<div class="hover_img">
<a href="indexx.html"><p>Look At This Photograph</p><span><img src="images/lookat-this2.gif" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Canyon Daze</p><span><img src="images/arenamock-Recoverevd.jpg" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Museum of Organic Shapes and Objects</p><span><img src="images/asset 4.png" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>1017 A L Y X 9SM</p><span><img src="images/alyxinvite.jpg" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Bean Sans</p><span><img src="images/beansansthumbnail-02.png" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Mutiny</p><span><img src="images/Mutiny_Ring.png" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Cassette Tapes</p><span><img src="images/casette_tws-04.png" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Pill Poppers</p><span><img src="images/pillpopcovermock.jpg" alt="image" height="400" /></span></a>
<a href="indexx.html"><p>Tendencies</p><span><img src="images/22.jpg" alt="image" height="400" /></span></a>
CSS:
.hover_img {
width: 100%;
padding-left: %;
padding-right: 10px 10px;
font-size: 35px;
line-height: 30px;
letter-spacing: .2px;
font-family: Sans;
}
.hover_img a { position:relative;
padding-left: 50;}
.hover_img a span { position:relative; display:none; z-index:1; }
.hover_img a:hover span { display:block; }
