Forums

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
http://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

treehouse : what would you like to learn today?

Forums

[Solved] Thumbnail questions