Optimizing Tags

I finally got the appearance I was looking for using styles in my portfolio but I feel like there ought to be a way to use less tags per image than I currently am and I haven't had any luck trimming it down. Any ideas?

css:


#portfolio {
position: absolute;
top: 161px;
left: 165px;
margin: 0;
padding: 0;
list-style-type: none;
}
#portfolio div {
float: left;
margin: 0 20px 20px 0;
padding: 3px;
border: 2px solid #eee;
}
#portfolio div div {
position: relative;
height: 110px;
width: 110px;
float: none;
margin: 0;
padding: 0;
border: none;
}
#portfolio img {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
border: 0;
z-index: 5000;
}
#portfolio a:hover img {
opacity: 0.1;
-moz-opacity: 0.1;
filter: alpha(opacity=10);
}
#portfolio p {
position: absolute;
bottom: 4px;
left: 4px;
margin: 0;
padding: 0;
display: inline;
}

body:


<div id="portfolio">
<div><div class="blue"><a href="#"><img src="images/food/01.jpg" alt="01" /></a><p>appetizer</p></div></div>
<div><div class="yellow"><a href="#"><img src="images/food/02.jpg" alt="02" /></a><p>dessert</p></div></div>
<div><div class="red"><a href="#"><img src="images/food/03.jpg" alt="03" /></a><p>fun <br />&amp; fruity</p></div></div>
<div><div class="blue"><a href="#"><img src="images/food/04.jpg" alt="04" /></a><p>dinner</p></div></div>
<div><div class="yellow"><a href="#"><img src="images/food/05.jpg" alt="05" /></a><p>WOW factor</p></div></div>
<div><div class="red"><a href="#"><img src="images/food/06.jpg" alt="06" /></a><p>action station</p></div></div>
</div><!--/portfolio-->

<html> <head> <title>Untitled</title> <style> #portfolio { position: absolute; top: 161px; left: 165px; margin: 0; padding: 0; list-style-type: none; } #portfolio div { float: left; margin: 0 20px 20px 0; padding: 3px; border: 2px solid #eee; } #portfolio img { position: relative; top: 0; left: 0; margin: 0; padding: 0; border: 0; z-index: 5000; } #portfolio a:hover img { opacity: 0.1; -moz-opacity: 0.1; filter: alpha(opacity=10); } #portfolio p { position: relative; bottom: 4px; left: 4px; margin: 0; padding: 0; display: inline; background:yellow; } .blue, .yellow, .red { height: 110px; width: 110px; } .blue { background: #1965b2; } .yellow { background: #d1a723; } .red { background: #ab231f; } a { color:#ffffff; } *:hover{outline: 1px dashed red; -moz-outline: 1px dashed red; } div:hover {outline: 1px dashed red; -moz-outline: 1px dashed red; } div:hover{background-image:none; background-color:gray; color:orange;} </style> </head> <body> <div id="portfolio"> <div class="blue"><a href="#"><img src="#" alt="01" /></a><p>appetizer</p></div> <div class="yellow"><a href="#"><img src="#" alt="02" /></a><p>dessert</p></div> <div class="red"><a href="#"><img src="#" alt="03" /></a><p>fun <br />& fruity</p></div> <div class="blue"><a href="#"><img src="#" alt="04" /></a><p>dinner</p></div> <div class="yellow"><a href="#"><img src="#" alt="05" /></a><p>WOW factor</p></div> <div class="red"><a href="#"><img src="#" alt="06" /></a><p>action station</p></div> </div>

</body> </html>

Optimizing Tags

How to achieve this effect with fewer tags

pinheadj

pinheadj

Aidin Sabetian

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week