The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Thumbnail questions Re: Thumbnail questions


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);