My site http://saccc567.com/AdvertisersDisplay1.php has a bunch of “business card” images. I purposely made them small for the page but want to have them increase in size (for viewability mainly) when the user hovers over them. Now, I found some CSS that does this but as you hover over the images going right, they start to jump all over the place.
How can I fix this?
P.S. the page is a php page but the generated code is using the embedded css to hover over it.
Thanks
E
oh boy…
This a problem with thinking ahead, mostly.
You have your images inline, and in flow, so any change to size, is going to affect all ‘downstream’ images. If you took the image out of the flow, then THAT too will have the opposite effect ( that is the images will jum, because it will be as if you have removed one image out of the flow) . BESIDES, this should be a LIST anyway. So we are going to need to change the markup and the
Your could do something like this:
.Pictures1{ list-style: none; padding:0; max-width:700px }
.Pictures1 li { width:120px; height:70px; margin :0 25px 25px 0 ;float: left; position: relative; border: 1px solid #555; }
.Pictures1 img { display: block; width:100% }
.Pictures1 li:hover img { position: absolute; left: 0; top:0; z-index: 100; width:300%; height:auto;}
.Pictures1 li:nth-child(n+4):hover img { right: 0; left:auto; }
</style>
</head>
<body>
<ul class="Pictures1" id="ex2">
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
<li> <img src="LuigisBC.png" ></li>
</ul>
UX note, I really would opt out of this effect all together, as enlarging a thumbnail will make it difficult to glide over and view adjacent images. ( sure you could mouse out and then guide your cursor between the gutter of your images ( you not i enlarged these) … but that still a pain. AND you have made the user download ALL the fullsize images, making you page slower to load.
The images begin to jump because the image reaches the edge of the page and tries to wrap. You will need an entirely different strategy than the one chosen to accomplish the effect that you described.
@Paul_O_B posted the code for something very similar to the effect that you desire in the following message:
You may be able to adapt his example to your page.
There are other possibilities, but Paul’s example is way cool!
PS: You’ll probably catch this as you go through your page…
The open <body> tag on line 50 is incorrectly formed:
<body id = "SACCCAdvertisersPage">';
This is a working example using @Paul_O_B’s code. Copy it to an html file and open it in your PC. The layout is fluid from wide screen to normal. Consider this a proof of concept, not a polished version, as the code can probably be improved.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1090508-CSS-image-size-change-not-working-on-right-side-images
Thread: CSS image size change not working on right side images
2013.05.31 12:35
fredep57
http://saccc567.com/AdvertisersDisplay1.php
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SACCC Advertisers</title>
<style media="screen" type="text/css">
html, body, h1, p {
margin:0;
padding:0;
}
body {
background: url("http://saccc567.com/images/saccc5bg.jpg") fixed repeat 0 0;
font-family: Arial, Helvetica, sans-serif;
}
#Wrapper {
display:table;
width:96%;
margin:20px auto; /* am assuming you wanted to center this*/
border-top: 1px transparent solid;
}
#leftcol {
width:160px;
float:left;
}
#center-col {
margin-left:160px;
}
#header {
color:#000;
margin: 0px 16% 0 12%;
font-size: 1.1em;
padding: 0;
text-align: center;
background-color: #00CC33;
border: 1px solid green;
vertical-align: middle;
}
.mainNav {
/* font-size: 20px; */
font-style: normal;
font-weight: bold;
font-family: Trebuchet MS, sans-serif;
background-repeat: no-repeat;
list-style-type: none;
list-style-position: outside;
text-decoration: none;
display: inline-block;
width: 155px;
padding:0;
margin:10px 0 0;
}
ul.mainNav li a {
background-image: url(http://saccc567.com/images/ChevySACCCr100x43.gif);
background-repeat: no-repeat;
/* // 4/25/2012 added below to size the image slightly bigger??? */
background-size: 110px;
background-position: 50% 80%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-stretch: normal;
font-style: normal;
font-weight: bold;
display: block;
height: 42px;
line-height: 39px;
/* padding: 15px 0; */
text-align: center;
text-decoration: none;
}
ul.mainNav li a:hover {
color: red;
/* changing from 75x33 per request */
background-image: url(http://saccc567.com/images/SACCC_BG2_100x42.gif);
background-repeat: no-repeat;
background-position: 50% 80%;
}
#ex2 {
margin-left:-30px;
margin-top:-20px;
}
#ex2 ul {
list-style:none;
text-align:center;
padding:36px 98px;
margin:0 auto;
}
#ex2 li {
display:inline-block;
vertical-align:middle;
margin:20px 2px;
}
#ex2 li img {
display:block;
width:180px;
}
#ex2 li:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform:scale(2);
box-shadow:15px 15px 2px rgba(0,0,0,0.5);
position:relative;
background:#f2f2f2;
-webkit-transition:transform .15s;
-moz-transition:transform .15s;
-ms-transition:transform .15s;
-o-transition:transform .15s;
transition:transform .15s;
}
</style>
</head>
<body id = "SACCCAdvertisersPage">
<div id="Wrapper" class="Container">
<div id="leftcol">
<p><img src="http://saccc567.com/images/SACCC_Color.gif" alt="SACCC Logo" width="160"></p>
<ul class="mainNav">
<li class="homePage"> <a id="nav-home" href="../ccount/click.php?id=1">Home</a> </li>
<li class="historyPage"> <a id="nav-history" href="../ccount/click.php?id=3">History</a></li>
<li class="sponsorPage"> <a id="nav-sponsors" href="../ccount/click.php?id=4">Sponsors</a> </li>
<li class="picturePage"> <a id="nav-pictures" href="../ccount/click.php?id=2">Pictures</a> </li>
<li class="eventPage"> <a id="nav-events" href="../ccount/click.php?id=5">Events</a> </li>
<li class="newsletterPage"><a id="nav-Newsletter" href="../ccount/click.php?id=6">Newsletter</a></li>
<li class="linksPage"> <a id="nav-links" href="../ccount/click.php?id=7">Links</a> </li>
<li class="officersPage"> <a id="nav-officers" href="../ccount/click.php?id=10">Officers</a> </li>
<!-- <li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=8">Show Info</a> </li> -->
<li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=11">Show Info</a> </li>
</ul>
</div> <!-- end left column -->
<div id="center-col">
<div id="header">
<h1 class="SACCCWelcome">Spokane Area Classic Chevy</h1>
<h1 class="SACCCWelcome">Advertisers</h1>
<div class="Mission">
<p>The following are advertisers that help the SACCC to continue to help others</p>
</div>
</div>
<div class="Pictures1" id="ex2">
<ul>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/BottlesBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/FlashsAutBodyBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/MasterBlastersBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/PhotoRodzBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/OReillyAutoPartsBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/AmericanWayAutoBodBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/CathayInnBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/LesSchwaNDivixionBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/RAMAXEngravingBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/WilliamsAutomotiveBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/BronzedBeanBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/ChattaroyRentalBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/SpokaneToppersBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/VHUpholsteryBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/JimsHomeBrewBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/NAPAFrancisBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/DennysArgonneBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/CorkysRadiatorBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/LuigisBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/ProfessionalFinishesBC.png"></li>
<li><img src="http://saccc567.com/SpecialPictures/Advertisers/AAASpokaneBC.png"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
ronpat,
thank you for this. i have put this to use and it does what i want. not sure what to improve but works!
E
Also, is there some way to make this work with IE8 and below? We still have some folks with XP and they can’t use IE9+.
E
I have not tried to apply the zoom behavior in IE8 for the purpose of scaling an object. That will take some time and testing.
If you will consider a stationary pop-up (instead of one that zooms) the attached code will work in IE8 nicely. (Personally, I prefer this method to things that zoom anyway.)
Interestingly due to a perpetual bug in Firefox, the scaled down small image will not look very sharp; therefore, to keep things looking sharp cross-browser, you will need to resize the small images in a graphics program to the size at which they will be rendered.
If you want to keep the box shadows in IE8, you could probably add PIE.
This code would be good to go, as they say.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1090508-CSS-image-size-change-not-working-on-right-side-images
Thread: CSS image size change not working on right side images
2013.05.31 12:35
fredep57
http://saccc567.com/AdvertisersDisplay1.php
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SACCC Advertisers</title>
<style media="screen" type="text/css">
html, body, h1, p {
margin:0;
padding:0;
}
body {
background:url("images/saccc5bg.jpg") fixed repeat 0 0;
font-family:Arial,Helvetica,sans-serif;
}
#Wrapper {
/* outline:1px solid red; /* */
display:table;
width:96%;
margin:20px auto;
}
#leftcol {
/* outline:1px solid blue; /* */
width:160px;
float:left;
}
#center-col {
/* outline:1px solid lime; /* */
margin-left:160px;
}
#header {
color:#000;
font-size:1.1em;
text-align:center;
background-color:#0c3;
border:1px solid green;
padding:0;
margin:0px 16% 0 12%;
}
.mainNav {
list-style-type:none;
width:160px;
font-style:normal;
font-weight:bold;
/* font-size: 20px; */
font-family:'Trebuchet MS',sans-serif;
text-decoration:none;
padding:0;
margin:10px 0 0;
}
.mainNav li a {
background-image:url(images/ChevySACCCr100x43.gif);
background-repeat:no-repeat;
/* // 4/25/2012 added below to size the image slightly bigger??? */
background-position:50% 80%;
background-size:110px;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
font-stretch:normal;
font-style:normal;
font-weight:bold;
display:block;
height:42px;
line-height:39px;
/* padding:15px 0; */
text-align:center;
text-decoration:none;
}
.mainNav li a:hover {
color:#f00;
/* changing from 75x33 per request */
background-image:url(images/SACCC_BG2_100x42.gif);
background-repeat:no-repeat;
background-position:50% 80%;
}
#ex2 {
/* outline:1px solid magenta; /* */
margin-left:-30px;
margin-top:-28px;
}
#ex2 ul {
list-style:none;
text-align:center;
padding:45px 103px 46px;
margin:0 auto;
}
#ex2 li {
/* outline:1px solid magenta; /* */
display:inline-block;
vertical-align:middle;
position:relative;
margin:20px 2px;
}
#ex2 li img {
display:block;
width:180px;
height:auto;
}
#ex2 li img + img {
width:360px;
height:auto;
opacity:0.0;
visibility:hidden;
position:absolute;
left:50%;
top:50%;
margin-left:-180px;
margin-top:-100px;
-webkit-transition:opacity .4s;
-moz-transition:opacity .4s;
-ms-transition:opacity .4s;
-o-transition:opacity .4s;
transition:opacity .4s;
}
#ex2 li:hover img + img {
visibility:visible;
opacity:1.0;
z-index:1;
box-shadow:0 0 8px 4px rgba(0,0,0,.6);
}
#ex2 li img + img[src$="BronzedBeanBC.png"] {
border-radius:20px;
}
</style>
</head>
<body id = "SACCCAdvertisersPage">
<div id="Wrapper" class="Container">
<div id="leftcol">
<p><img src="images/SACCC_Color.gif" alt="SACCC Logo" width="160"></p>
<ul class="mainNav">
<li class="homePage"> <a id="nav-home" href="../ccount/click.php?id=1">Home</a> </li>
<li class="historyPage"> <a id="nav-history" href="../ccount/click.php?id=3">History</a></li>
<li class="sponsorPage"> <a id="nav-sponsors" href="../ccount/click.php?id=4">Sponsors</a> </li>
<li class="picturePage"> <a id="nav-pictures" href="../ccount/click.php?id=2">Pictures</a> </li>
<li class="eventPage"> <a id="nav-events" href="../ccount/click.php?id=5">Events</a> </li>
<li class="newsletterPage"><a id="nav-Newsletter" href="../ccount/click.php?id=6">Newsletter</a></li>
<li class="linksPage"> <a id="nav-links" href="../ccount/click.php?id=7">Links</a> </li>
<li class="officersPage"> <a id="nav-officers" href="../ccount/click.php?id=10">Officers</a> </li>
<!-- <li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=8">Show Info</a> </li> -->
<li class="CarShowInfo"> <a id="nav-ShowInfo" href="../ccount/click.php?id=11">Show Info</a> </li>
</ul>
</div> <!-- end left column -->
<div id="center-col">
<div id="header">
<h1 class="SACCCWelcome">Spokane Area Classic Chevy</h1>
<h1 class="SACCCWelcome">Advertisers</h1>
<div class="Mission">
<p>The following are advertisers that help the SACCC to continue to help others</p>
</div>
</div>
<div class="Pictures1" id="ex2">
<ul>
<li><img src="images/BottlesBC.png"><img src="images/BottlesBC.png"></li>
<li><img src="images/FlashsAutBodyBC.png"><img src="images/FlashsAutBodyBC.png"></li>
<li><img src="images/MasterBlastersBC.png"><img src="images/MasterBlastersBC.png"></li>
<li><img src="images/PhotoRodzBC.png"><img src="images/PhotoRodzBC.png"></li>
<li><img src="images/OReillyAutoPartsBC.png"><img src="images/OReillyAutoPartsBC.png"></li>
<li><img src="images/AmericanWayAutoBodBC.png"><img src="images/AmericanWayAutoBodBC.png"></li>
<li><img src="images/CathayInnBC.png"><img src="images/CathayInnBC.png"></li>
<li><img src="images/NorthwestPizzaSlicesBC.png"><img src="images/NorthwestPizzaSlicesBC.png"></li>
<li><img src="images/LesSchwaNDivixionBC.png"><img src="images/LesSchwaNDivixionBC.png"></li>
<li><img src="images/RAMAXEngravingBC.png"><img src="images/RAMAXEngravingBC.png"></li>
<li><img src="images/WilliamsAutomotiveBC.png"><img src="images/WilliamsAutomotiveBC.png"></li>
<li><img src="images/BronzedBeanBC.png"><img src="images/BronzedBeanBC.png"></li>
<li><img src="images/ChattaroyRentalBC.png"><img src="images/ChattaroyRentalBC.png"></li>
<li><img src="images/SpokaneToppersBC.png"><img src="images/SpokaneToppersBC.png"></li>
<li><img src="images/VHUpholsteryBC.png"><img src="images/VHUpholsteryBC.png"></li>
<li><img src="images/JimsHomeBrewBC.png"><img src="images/JimsHomeBrewBC.png"></li>
<li><img src="images/NAPAFrancisBC.png"><img src="images/NAPAFrancisBC.png"></li>
<li><img src="images/DennysArgonneBC.png"><img src="images/DennysArgonneBC.png"></li>
<li><img src="images/CorkysRadiatorBC.png"><img src="images/CorkysRadiatorBC.png"></li>
<li><img src="images/LuigisBC.png"><img src="images/LuigisBC.png"></li>
<li><img src="images/ProfessionalFinishesBC.png"><img src="images/ProfessionalFinishesBC.png"></li>
<li><img src="images/AAASpokaneBC.png"><img src="images/AAASpokaneBC.png"></li>
</ul>
</div>
</div>
</div>
</body>
</html>