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

Home Forums CSS Thumbnail questions

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #37780

    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…

    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!


    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


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

    So mark as “SOLVED” this issue then

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.