Thumbnail questions

[jmc]

I am currently working on a wordpress template for a small magazine. I would like to add a ‘previous issues’ section to the site, with thumbnails with an image of the corresponding cover linking to a larger cover image (displayed in lightbox).

I would like to add an animated hover effect over the thumbnail that darkens the image and displays a magnifier icon in the center. Examples of what I aim to do can be found in the links beneath…

http://forefathersgroup.com/the-workshop
http://www.designzillas.com/portfolio/websites

I am relatively new to web-design, so attempts to decipher the above websites’ code myself (via firebug) to solve my issue independently have fallen short. Any assistance would be greatly appreciated!

[shamai]

it would appear those websites are using javascript, though i don’t think you need to.

you can have a css selector for hover. you can place an image on top of the thumbnail with the magnifier with opacity set to 0 and when one hovers the image opacity becomes 1.
You can use css3 transition effects to make it exactly the same

check this out
https://css-tricks.com/different-transitions-for-hover-on-hover-off/

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

}

[ukando]

So mark as “SOLVED” this issue then

[Author]

Posts