1 reply [Last post]
waratahbay
waratahbay's picture
Offline
newbie
Melbourne, Australia
Last seen: 7 years 12 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2014-05-04
Posts: 1
Points: 2

The index page of my website displays a number of images in a div that is set at 0.4 (40%) opacity. I have coded (to the best of my current skill) the page so that on mouse hover each image scales by a factor of 3 and then displays at full opacity (1.0 or 100%) in front of the original and dimmer image array.

My coding for opacity change on hover works in IE and Firefox, but not in Chrome 20.0 or Opera 34 or Safari. I have spent all day going all over the web and am at my wit's end. Any help most appreciated. (I'm very new to coding.)

CSS code:

.slider img {
	border-style:solid;
	border-color:#404040;
	opacity: 0.4; /* css standard */
	filter:alpha(opacity=30); /* internet explorer */
}
.slider img:hover {
	-webkit-transform: scale(3); z-index: 100;
	-moz-transform: scale(3); z-index: 100;
	-ms-transform: scale(3); z-index: 100;
	-o-transform: scale(3); z-index: 100;
	transform: scale(3);  z-index: 100;
	opacity: 1.0; /* css standard */
	filter:alpha(opacity=100); /* oldinternet explorer */
	-khtml-opacity: 1.0; /* old Safari */
	z-index: 100;
}
#navbar {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	background-color: #000000;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	font-size: x-large;
	text-decoration: none;
	color: #F7DF06;
	width:100%;
}
#navbar {
	position:absolute;
	top:825px;
	width:100%;
}
#baseplate {
	position: absolute;
	top:875px;
	width: 100%;
	align: centre;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}

HTML code:

<div class="slider">
    <p align="center">
    	<img id="1" src="img/Sunrise.jpg" border="0" height="100px" width="150px" alt="Sunrise"/>&nbsp;&nbsp;&nbsp;		 	
    	<img id="2" src="img/Cammeray.jpg" border="0" height="100px" width="150px" alt="Cammeray"/>&nbsp;&nbsp;&nbsp;
      	<img id="3" src="img/NYC.jpg" border="0" height="100px" width="150px" alt="New York"/>&nbsp;&nbsp;&nbsp;
      	<img id="4" src="img/Beach.jpg" border="0" height="100px" width="150px" alt="Beach"/>&nbsp;&nbsp;&nbsp;
      	<img id="5" src="img/Storm.jpg" border="0" height="100px" width="150px" alt="Storm"/></p>
    <p align="center">
    	<img id="6" src="img/Loch.jpg" border="0" height="100px" width="150px" alt="Loch"/>&nbsp;&nbsp;&nbsp;
        <img id="7" src="img/Stonelea.jpg" border="0" height="100px" width="150px" alt="Stonelea"/>&nbsp;&nbsp;&nbsp;
        <img id="8" src="img/Pantheon.jpg" border="0" height="100px" width="150px" alt="Pantheon"/>&nbsp;&nbsp;&nbsp;
        <img id="9" src="img/SCS.jpg" border="0" height="100px" width="150px" alt="South China Sea"/>&nbsp;&nbsp;&nbsp;
      	<img id="10" src="img/Tennis.jpg" border="0" height="100px" width="150px" alt="Tennis"/></p>
    <p align="center">
    	<img id="11" src="img/Chenonceaux.jpg" border="0" height="100px" width="150px" alt="Chenonceaux"/>&nbsp;&nbsp;&nbsp;
        <img id="12" src="img/HK.jpg" border="0" height="100px" width="150px" alt="Hong Kong"/>&nbsp;&nbsp;&nbsp;
      	<img id="13" src="img/Clouds.jpg" border="0" height="100px" width="150px" alt="Clouds"/>&nbsp;&nbsp;&nbsp;
        <img id="14" src="img/Sydney.jpg" border="0" height="100px" width="150px" alt="Sydney"/>&nbsp;&nbsp;&nbsp;
        <img id="15" src="img/Waratah.jpg" border="0" height="100px" width="150px" alt="Waratah"/></p>
</div>
 
<p>&nbsp;</p>
 
<div id="navbar">
 
  	<div align="center" style="Arial, sans-serif color: #F9F000;">
  	Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="about.html">About</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="contact.html">Contact</a>
    </div>
</div>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You have html and css errors

Before going any further, you should validate the html and css syntaxes. Errors can cause failures.

HTML, http://validator.w3.org/

CSS, http://jigsaw.w3.org/css-validator/

It is always a Best Practice to ensure that your coding is valid. It is also a requirement of this forum.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.