Click to Enlarge Thumbnail Image via CSS Without Javascript Injection

Question

I'm trying to implement a similar effect to what you see on this page - when hovering over any of the thumbnail images the main image is enlarged and changed to the thumbnail image being hovered over.

Based on what I've read on stackoverflow this is accomplished via CSS without injecting any Javascript.

The HTML I used to display/format images is as follows:

#DIV_2 {
    color: rgb(51, 51, 51);
    float: left;
    height: 547px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 705px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 363.5px 284.5px;
    transform-origin: 363.5px 284.5px;
    caret-color: rgb(51, 51, 51);
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(203, 203, 203);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 0px 20px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
    padding: 10px;
}


/*#DIV_2*/

#DIV_2:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#DIV_2:after*/

#DIV_2:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#DIV_2:before*/

#PRODUCT_TITLE_DIV {
    color: rgb(42, 42, 42);
    float: left;
    height: 23px;
    text-align: center;
    text-decoration: none solid rgb(42, 42, 42);
    width: 705px;
    column-rule-color: rgb(42, 42, 42);
    perspective-origin: 352.5px 24px;
    transform-origin: 352.5px 24px;
    caret-color: rgb(42, 42, 42);
    border-top: 0px none rgb(42, 42, 42);
    border-right: 0px none rgb(42, 42, 42);
    border-bottom: 5px solid rgb(255, 102, 0);
    border-left: 0px none rgb(42, 42, 42);
    font: normal normal 700 normal 20px / normal Arial;
    margin: 0px 0px 25px;
    outline: rgb(42, 42, 42) none 0px;
    overflow: hidden;
    padding: 10px 0px;
}


/*#PRODUCT_TITLE_DIV*/

#PRODUCT_TITLE_DIV:after {
    color: rgb(42, 42, 42);
    text-align: center;
    text-decoration: none solid rgb(42, 42, 42);
    column-rule-color: rgb(42, 42, 42);
    caret-color: rgb(42, 42, 42);
    border: 0px none rgb(42, 42, 42);
    font: normal normal 700 normal 20px / normal Arial;
    outline: rgb(42, 42, 42) none 0px;
}


/*#PRODUCT_TITLE_DIV:after*/

#PRODUCT_TITLE_DIV:before {
    color: rgb(42, 42, 42);
    text-align: center;
    text-decoration: none solid rgb(42, 42, 42);
    column-rule-color: rgb(42, 42, 42);
    caret-color: rgb(42, 42, 42);
    border: 0px none rgb(42, 42, 42);
    font: normal normal 700 normal 20px / normal Arial;
    outline: rgb(42, 42, 42) none 0px;
}


/*#PRODUCT_TITLE_DIV:before*/

#IMAGE_DIV_SECTION {
    bottom: 0px;
    color: rgb(51, 51, 51);
    float: left;
    height: 444px;
    left: 0px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(51, 51, 51);
    top: 0px;
    width: 705px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 352.5px 222px;
    transform-origin: 352.5px 222px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 0px 30px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#IMAGE_DIV_SECTION*/

#IMAGE_DIV_SECTION:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMAGE_DIV_SECTION:after*/

#IMAGE_DIV_SECTION:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMAGE_DIV_SECTION:before*/

#SHOW_SMALL_DIV {
    color: rgb(51, 51, 51);
    float: left;
    height: 444px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 240px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 355px 222px;
    transform-origin: 355px 222px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
    padding: 0px 0px 0px 470px;
}


/*#SHOW_SMALL_DIV*/

#SHOW_SMALL_DIV:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_SMALL_DIV:after*/

#SHOW_SMALL_DIV:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_SMALL_DIV:before*/

#THUMBNAIL_IMAGE_DIV_1,
#THUMBNAIL_IMAGE_DIV_2,
#THUMBNAIL_IMAGE_DIV_3,
#THUMBNAIL_IMAGE_DIV_4,
#THUMBNAIL_IMAGE_DIV_5,
#THUMBNAIL_IMAGE_DIV_6,
#THUMBNAIL_IMAGE_DIV_7,
#THUMBNAIL_IMAGE_DIV_8 {
    color: rgb(51, 51, 51);
    float: left;
    height: 100px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 100px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 51px 51px;
    transform-origin: 51px 51px;
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 8px 9px 0px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#THUMBNAIL_IMAGE_DIV_1, #THUMBNAIL_IMAGE_DIV_2, #THUMBNAIL_IMAGE_DIV_3, #THUMBNAIL_IMAGE_DIV_4, #THUMBNAIL_IMAGE_DIV_5, #THUMBNAIL_IMAGE_DIV_6, #THUMBNAIL_IMAGE_DIV_7, #THUMBNAIL_IMAGE_DIV_8*/

#THUMBNAIL_IMAGE_DIV_1:after,
#THUMBNAIL_IMAGE_DIV_2:after,
#THUMBNAIL_IMAGE_DIV_3:after,
#THUMBNAIL_IMAGE_DIV_4:after,
#THUMBNAIL_IMAGE_DIV_5:after,
#THUMBNAIL_IMAGE_DIV_6:after,
#THUMBNAIL_IMAGE_DIV_7:after,
#THUMBNAIL_IMAGE_DIV_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#THUMBNAIL_IMAGE_DIV_1:after, #THUMBNAIL_IMAGE_DIV_2:after, #THUMBNAIL_IMAGE_DIV_3:after, #THUMBNAIL_IMAGE_DIV_4:after, #THUMBNAIL_IMAGE_DIV_5:after, #THUMBNAIL_IMAGE_DIV_6:after, #THUMBNAIL_IMAGE_DIV_7:after, #THUMBNAIL_IMAGE_DIV_8:after*/

#THUMBNAIL_IMAGE_DIV_1:before,
#THUMBNAIL_IMAGE_DIV_2:before,
#THUMBNAIL_IMAGE_DIV_3:before,
#THUMBNAIL_IMAGE_DIV_4:before,
#THUMBNAIL_IMAGE_DIV_5:before,
#THUMBNAIL_IMAGE_DIV_6:before,
#THUMBNAIL_IMAGE_DIV_7:before,
#THUMBNAIL_IMAGE_DIV_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#THUMBNAIL_IMAGE_DIV_1:before, #THUMBNAIL_IMAGE_DIV_2:before, #THUMBNAIL_IMAGE_DIV_3:before, #THUMBNAIL_IMAGE_DIV_4:before, #THUMBNAIL_IMAGE_DIV_5:before, #THUMBNAIL_IMAGE_DIV_6:before, #THUMBNAIL_IMAGE_DIV_7:before, #THUMBNAIL_IMAGE_DIV_8:before*/

#THUMBNAIL_IMG_1,
#THUMBNAIL_IMG_2,
#THUMBNAIL_IMG_3,
#THUMBNAIL_IMG_4,
#THUMBNAIL_IMG_5,
#THUMBNAIL_IMG_6,
#THUMBNAIL_IMG_7,
#THUMBNAIL_IMG_8 {
    color: rgb(51, 51, 51);
    height: 110px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 110px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 55px 55px;
    transform-origin: 55px 55px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_7, #THUMBNAIL_IMG_2, #THUMBNAIL_IMG_3, #THUMBNAIL_IMG_4, #THUMBNAIL_IMG_5, #THUMBNAIL_IMG_6, #THUMBNAIL_IMG_7, #THUMBNAIL_IMG_8*/

#THUMBNAIL_IMG_1:after,
#THUMBNAIL_IMG_2:after,
#THUMBNAIL_IMG_3:after,
#THUMBNAIL_IMG_4:after,
#THUMBNAIL_IMG_5:after,
#THUMBNAIL_IMG_6:after,
#THUMBNAIL_IMG_7:after,
#THUMBNAIL_IMG_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_7:after, #THUMBNAIL_IMG_2:after, #THUMBNAIL_IMG_3:after, #THUMBNAIL_IMG_4:after, #THUMBNAIL_IMG_5:after, #THUMBNAIL_IMG_6:after, #THUMBNAIL_IMG_7:after, #THUMBNAIL_IMG_8:after*/

#THUMBNAIL_IMG_1:before,
#THUMBNAIL_IMG_2:before,
#THUMBNAIL_IMG_3:before,
#THUMBNAIL_IMG_4:before,
#THUMBNAIL_IMG_5:before,
#THUMBNAIL_IMG_6:before,
#THUMBNAIL_IMG_7:before,
#THUMBNAIL_IMG_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_7:before, #THUMBNAIL_IMG_2:before, #THUMBNAIL_IMG_3:before, #THUMBNAIL_IMG_4:before, #THUMBNAIL_IMG_5:before, #THUMBNAIL_IMG_6:before, #THUMBNAIL_IMG_7:before, #THUMBNAIL_IMG_8:before*/

#SHOW_BIG_IMAGE_DIV_1 {
    bottom: -6px;
    color: rgb(51, 51, 51);
    height: 450px;
    left: 0px;
    position: absolute;
    right: 240px;
    text-decoration: none solid rgb(51, 51, 51);
    top: 0px;
    width: 450px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 225px 225px;
    transform-origin: 225px 225px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 5px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#SHOW_BIG_IMAGE_DIV_1*/

#SHOW_BIG_IMAGE_DIV_1:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_1:after*/

#SHOW_BIG_IMAGE_DIV_1:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_1:before*/

#IMG_1 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 237.5px 237.5px;
    transform-origin: 237.5px 237.5px;
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_1*/

#IMG_1:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_1:after*/

#IMG_1:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_1:before*/

#SHOW_BIG_IMAGE_DIV_2,
#SHOW_BIG_IMAGE_DIV_3,
#SHOW_BIG_IMAGE_DIV_4,
#SHOW_BIG_IMAGE_DIV_5,
#SHOW_BIG_IMAGE_DIV_6,
#SHOW_BIG_IMAGE_DIV_7,
#SHOW_BIG_IMAGE_DIV_8 {
    color: rgb(51, 51, 51);
    display: none;
    float: left;
    height: 450px;
    left: 0px;
    position: absolute;
    text-decoration: none solid rgb(51, 51, 51);
    top: 0px;
    width: 450px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    margin: 0px 5px 0px 10px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
}


/*#SHOW_BIG_IMAGE_DIV_2, #SHOW_BIG_IMAGE_DIV_3, #SHOW_BIG_IMAGE_DIV_4, #SHOW_BIG_IMAGE_DIV_5, #SHOW_BIG_IMAGE_DIV_6, #SHOW_BIG_IMAGE_DIV_7, #SHOW_BIG_IMAGE_DIV_8*/

#SHOW_BIG_IMAGE_DIV_2:after,
#SHOW_BIG_IMAGE_DIV_3:after,
#SHOW_BIG_IMAGE_DIV_4:after,
#SHOW_BIG_IMAGE_DIV_5:after,
#SHOW_BIG_IMAGE_DIV_6:after,
#SHOW_BIG_IMAGE_DIV_7:after,
#SHOW_BIG_IMAGE_DIV_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_2:after, #SHOW_BIG_IMAGE_DIV_3:after, #SHOW_BIG_IMAGE_DIV_4:after, #SHOW_BIG_IMAGE_DIV_5:after, #SHOW_BIG_IMAGE_DIV_6:after, #SHOW_BIG_IMAGE_DIV_7:after, #SHOW_BIG_IMAGE_DIV_8:after*/

#SHOW_BIG_IMAGE_DIV_2:before,
#SHOW_BIG_IMAGE_DIV_3:before,
#SHOW_BIG_IMAGE_DIV_4:before,
#SHOW_BIG_IMAGE_DIV_5:before,
#SHOW_BIG_IMAGE_DIV_6:before,
#SHOW_BIG_IMAGE_DIV_7:before,
#SHOW_BIG_IMAGE_DIV_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#SHOW_BIG_IMAGE_DIV_2:before, #SHOW_BIG_IMAGE_DIV_3:before, #SHOW_BIG_IMAGE_DIV_4:before, #SHOW_BIG_IMAGE_DIV_5:before, #SHOW_BIG_IMAGE_DIV_6:before, #SHOW_BIG_IMAGE_DIV_7:before, #SHOW_BIG_IMAGE_DIV_8:before*/

#IMG_2,
#IMG_3,
#IMG_5,
#THUMBNAIL_IMG_1 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_2, #IMG_3, #IMG_5, #IMG_7*/

#IMG_2:after,
#IMG_3:after,
#IMG_5:after,
#THUMBNAIL_IMG_1:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_2:after, #IMG_3:after, #IMG_5:after, #IMG_7:after*/

#IMG_2:before,
#IMG_3:before,
#IMG_5:before,
#THUMBNAIL_IMG_1:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_2:before, #IMG_3:before, #IMG_5:before, #IMG_7:before*/

#IMG_4,
#IMG_6 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_4, #IMG_6*/

#IMG_4:after,
#IMG_6:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_4:after, #IMG_6:after*/

#IMG_4:before,
#IMG_6:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_4:before, #IMG_6:before*/

#IMG_8 {
    color: rgb(51, 51, 51);
    height: 473px;
    text-decoration: none solid rgb(51, 51, 51);
    width: 473px;
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 1px solid rgb(197, 197, 197);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_8*/

#IMG_8:after {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_8:after*/

#IMG_8:before {
    color: rgb(51, 51, 51);
    text-decoration: none solid rgb(51, 51, 51);
    column-rule-color: rgb(51, 51, 51);
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 16px / normal Arial, Helvetica, sans-serif;
    outline: rgb(51, 51, 51) none 0px;
}


/*#IMG_8:before*/

<div id="DESCRIPTION_DIV">
    <div id="DIV_2">
        <div class="product_title_class" id="PRODUCT_TITLE_DIV">New Acoustic Violin 4/4 Full Size with Case and Bow Rosin Wood</div>
        <div id="IMAGE_DIV_SECTION">
            <div class="show_small_class" id="SHOW_SMALL_DIV">
                <div id="THUMBNAIL_IMAGE_DIV_1"><img src="https://yallstore.s3.amazonaws.com/Y%2FY00326%2FY00326-23-180516135859.jpg" name="p1" id="THUMBNAIL_IMG_1">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_1"><img src="https://yallstore.s3.amazonaws.com/Y%2FY00326%2FY00326-23-180516135859.jpg" id="IMG_1" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_2"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg" name="p2" id="THUMBNAIL_IMG_2">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_2"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg" id="IMG_2" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_3"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-13_002-140125190407.jpg" name="p3" id="THUMBNAIL_IMG_3">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_3"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-13_002-140125190407.jpg" id="IMG_3" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_4"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-12_001-140124181647.jpg" name="p4" id="THUMBNAIL_IMG_4">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_4"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-12_001-140124181647.jpg" id="IMG_4" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_5"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-10_001-140125211344.jpg" name="p5" id="THUMBNAIL_IMG_5">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_5"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-10_001-140125211344.jpg" id="IMG_5" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_6"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-6_001-140122143027.jpg" name="p6" id="THUMBNAIL_IMG_6">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_6"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-6_001-140122143027.jpg" id="IMG_6" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_7"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-5_001-140122143020.jpg" name="p7" id="THUMBNAIL_IMG_7">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_7"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-5_001-140122143020.jpg" id="IMG_7" name="mi"></div>
                </div>
                <div id="THUMBNAIL_IMAGE_DIV_8"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-1-140122143012.jpg" name="p8" id="THUMBNAIL_IMG_8">
                    <div class="showbig" id="SHOW_BIG_IMAGE_DIV_8"><img src="https://yallstore.s3.amazonaws.com/images%2FY00326-1-140122143012.jpg" id="IMG_8" name="mi"></div>
                </div>
            </div>
        </div>
    </div>

I was able to format the images correctly on Codepen (please see CSS style information on Codepen link, it is too long to post here) however when I hover over the secondary/thumbnail images the primary image does not change.

Also if you hover over "Shipping", "Payment", "Return", "Feedback" section on the bottom of listing this causes the text under it to change automatically - how is this accomplished?

Thanks

I think you can't achieve this by using only CSS because it tries to change other's style. If you make the element which need to show/hide as a child of the element you hover, it could be made. — Terry Wei, Jun 27 '18 at 03:25
this is possible, I'm working on an answer now, it just might require a bit of restructuring. :) — , Jun 27 '18 at 03:37
@TerryWei Isn't the 'showbig' class already a child of the element being hovered over? If not, do you mind providing an example of how it would look if it was a child.. Thanks! — David Lynch, Jun 28 '18 at 16:58

score 3 · Answer 1 · 2018-06-27T04:52:20.057

To be honest, I would completely re-approach the markup. If you define your images as backgrounds instead of img tags, you can easily set the background via CSS using a clever little combination of :hover and the ~ general sibling selector.

If you arrange your HTML more like this:

<div class="container">
  <a class="thumbnail image-1" id="image-1" href="#image-1"></a>
  <a class="thumbnail image-2" id="image-2" href="#image-2"></a>
  <a class="thumbnail image-3" id="image-3" href="#image-3"></a>
  <a class="thumbnail image-4" id="image-4" href="#image-4"></a>
  <a class="thumbnail image-5" id="image-5" href="#image-5"></a>
  <a class="thumbnail image-6" id="image-6" href="#image-6"></a>
  <a class="thumbnail image-7" id="image-7" href="#image-7"></a>
  <a class="thumbnail image-8" id="image-8" href="#image-8"></a>
  <div class="enlarged"></div>
</div>

You can use this CSS to determine which image shows in the enlarged box:

.image-1, .image-1:hover ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg) !important; }
.image-2, .image-2:hover ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/images%2FY00326-13_002-140125190407.jpg) !important; }

/* etc ... */

Basically what this is doing is setting the background of the thumbnail, and then if the user is hovering over the thumbnail, it will select any element with the 'enlarged' class which follows in the same nested layer, and apply the background to that too. We're using !important here because we want the hover to take precedence over the click, which brings us to the next part!

To base it on which element is clicked, use :target like so:

.image-1:target ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/Y%2FY00326%2FY00326-23-180516135859.jpg); }
.image-2:target ~ .enlarged { background-image: url(https://yallstore.s3.amazonaws.com/images%2FY00326-17-140122110837.jpg); }
/* etc ... */

This is essentially telling the browser to apply styles based on the hash at the end of the URL. When the "target" (hash) matches the ID of the element in question, it will apply those styles. Then of course we use the ~ general sibling selector in the same way.

Here's a working codepen example to play with!

Thanks so much for your reply. If I understand correctly, this solution requires me to modify the CSS style information separately for each listing. However this is not feasible for me because I plan on linking to a single external style sheet as a template for all my listings. Based on the example in the OP it seems that this can be accomplished with a static style sheet (i.e, w/o modifying CSS information each time). Do you know how it might be achieved? Once again, if you look at the link in OP he is accomplishing it somehow with a single CSS template.. Thanks! — David Lynch, Jun 28 '18 at 16:57
There's always a way. ;) First I want to make sure I understand your situation. You're saying your items and their images will be dynamic, and you don't want to write extra CSS every time you get a new item, correct? — , Jun 28 '18 at 17:03
Hi The images for a single listing will be static but I plan on listing 20,000+ items on ebay and each item will contain a different set of images (but images will not change over time for the given listing). Since each listing requires me to link to external file containing CSS information, it means I need to create 20,000 variations of the CSS file instead of using one file and modifying some value in the listing itself. If I understand correctly the linked page is accomplishing this somehow using a single CSS template. Thank you! — David Lynch, Jun 28 '18 at 17:18
In that case, do you have control over the HTML structure or just the text content? — , Jun 28 '18 at 18:40
My preferred way of accomplishing this would probably be to somehow use ajax to fetch your products, and then assign the image urls to css variables ... but you said you want to avoid JavaScript. In that case, I think your only option is to use two different `` tags for the same product image, just like the markup you showed me in that link. Put all your enlarged image tags at the bottom, then use `position: absolute;` and use a similar strategy as the one in my answer, but instead of toggling the background image, toggle `display: none;` — , Jun 28 '18 at 19:51

Click to Enlarge Thumbnail Image via CSS Without Javascript Injection

1 Answers1