Resolved CSS - How to Call Images with Hover in a DIV

webinstructor · 03-22-2012, 08:42 AM

I have 4 images A B C D

when i hover A thumbnail it shows an image in div
when i hover B thumbnail it shows an image replace by B image in same div
when i hover C thumbnail it shows an image replace by C image in same div
Simply:
Same div change images with hovering on thumbnail.

coothead · 03-22-2012, 10:40 AM

Hi there webinstructor,

here is an example that works in browsers that render CSS background-size...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>CSS swap image</title>

<style type="text/css">
body {
    -webkit-animation: bugfix infinite 1s;  /* Safari adjacent sibling bug fix */
    background-color:#f0f0f0;
 }
@-webkit-keyframes bugfix {                /* Safari adjacent sibling bug fix */
    from { padding: 0; } to { padding: 0; } 
 }
#container {
    position:relative;
    width:516px;
    height:412px;
    padding:12px;
    border:1px solid #222;
    margin:20px auto;
    background-color:#555;
    box-shadow:#333 10px 10px 20px;
 }
#a {
    position:absolute;
    width:514px;
    height:318px;
    border:1px solid #f00;
    top:10px;
    background-image:url(blood.jpg);
    background-size:100% 100%;
    box-shadow:#222 4px 4px 8px;
 }
#b,#c,#d,#e {
    position:absolute;
    width:118px;
    height:78px;
    border:1px solid #000;
    top:342px;
    background-image:url(buddha.jpg);
    background-size:100% 100%;
    box-shadow:#222 4px 4px 8px;
    cursor:pointer;
 }
#c  {
    left:142px;
    background-image:url(autumn.jpg);
 }
#d  {
    left:274px;
    background-image:url(col.jpg);
 }
#e  {
    left:406px;
    background-image:url(avenue.jpg);
 }
#b:hover,#c:hover,#d:hover,#e:hover { 
    opacity:0.6;
 }
#b:hover+div+div+div+div {
    background-image:url(buddha.jpg);
    border-color:#fef47a;
 }
#c:hover+div+div+div {
    background-image:url(autumn.jpg);
    border-color:#f93;
 }
#d:hover+div+div {
    background-image:url(col.jpg);
    border-color:#6785b7;
 }
#e:hover+div {
    background-image:url(avenue.jpg);
    border-color:#91a81d;
 }
</style>

</head>
<body>

<div id="container">
 <div id="b"></div>
 <div id="c"></div>
 <div id="d"></div>
 <div id="e"></div>
 <div id="a"></div>
</div>

</body>
</html>

If older browsers are a concern, then you would need to give your thumbnails and full size images the appropriate dimensions.

coothead

webinstructor · 03-22-2012, 12:56 PM

Thanks Thanks Thanks

best regards

coothead · 03-22-2012, 12:59 PM

No problem, you're very welcome.

coothead