Re: Thumbnail questions

[jmc]

Thank you so much! between this, and #93 video tutorial, I was able to create the effect I sought. I had to use the name attribute to give each thumbnail a unique background, so the centered image (magnify glass) within the element can shift opacity on rollover. My code might be a bit sloppy, but this is how I achieved it

/*

previous issues styling

*/



.entry .mag {

margin: 0px;

padding: 0px;

list-style-type: none;

border-top-width: 2px;

border-top-style: dotted;

border-top-color: #674A2E;

}



.entry .mag li{

display: block;

list-style-type: none;

height: 152px;

border-bottom-width: 2px;

border-bottom-style: dotted;

border-bottom-color: #674A2E;

padding-top: 15px;

padding-right: 0px;

padding-bottom: 10px;

padding-left: 0px;

font-family: Lobster;

margin: 0px;

text-align: left;

}



.entry .mag li:nth-child(odd){

background-color: rgba(255, 255, 255, 0.5);

}



.entry .mag li .cover{

background-color: #FFF;

background-position: center center;

padding: 0;

margin: 0 10px 0 0;

height: 150px;

width: 150px;

border: 2px solid #385D17;

border-radius: 50%;

-webkit-box-shadow: inset 0 0 22px #000;

-moz-box-shadow: inset 0 0 22px #000;

-o-box-shadow: inset 0 0 22px #000;

position: relative;

overflow: hidden;

float: left;

text-align: center;

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

-o-transition: all 0.2s ease-in;

}



.entry .mag li .cover:hover{

-webkit-box-shadow: inset 0 0 42px #000;

-moz-box-shadow: inset 0 0 42px #000;

-o-box-shadow: inset 0 0 42px #000;

}



.entry .mag li .cover img{

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

-ms-transition: all 0.2s ease-in;

-o-transition: all 0.2s ease-in;

position: absolute;

top: 50px;

left: 50px;

opacity: 0;

}



.entry .mag li .cover:hover img{

opacity: 0.9;

}



/*

individual mag styles

*/



.entry .mag li .cover[name="01"]{

background-image: url(images/covers/2011-10.jpg);

}



.entry .mag li .cover[name="02"]{

background-image: url(images/covers/2011-11.jpg);

}



.entry .mag li .cover[name="03"]{

background-image: url(images/covers/2011-12.jpg);

}



.entry .mag li .cover[name="04"]{

background-image: url(images/covers/2012-01.jpg);

}



.entry .mag li .cover[name="05"]{

background-image: url(images/covers/2012-02.jpg);

}



.entry .mag li .cover[name="06"]{

background-image: url(images/covers/2012-03.jpg);

}



.entry .mag li .cover[name="07"]{

background-image: url(images/covers/2012-04.jpg);

}