Hellfire-gamer
Legacy Member
Hallo. Ik ben momenteel bezig met een website te maken maar heb een probleem:
Ik wil namelijk een clickable image met een hover effect. Mijn code werkt in Google Chrome perfect. De miserie begint als ik mijn website in IE test. Er komt dan een lelijke blauwe rand rond de <a></a> tags waarin mijn afbeelding zit.
Weet iemand een oplossing hiervoor? Waarschijnlijk iets simpel? Mijn image moet wel clickable zijn, vandaar het gebruik van de <a></a>.
HTML code:
<a href="#" class="project-item"><img src="images/projecten/AboutMe.png" width="310" height="194" alt="About Me project"></a>
CSS:
.project-item
{
margin-left:20px;
width:313px;
float:left;
}
.project-item img
{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 200ms linear;
}
.project-item img:hover
{
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 200ms linear;
}
hartelijk dank!
Ik wil namelijk een clickable image met een hover effect. Mijn code werkt in Google Chrome perfect. De miserie begint als ik mijn website in IE test. Er komt dan een lelijke blauwe rand rond de <a></a> tags waarin mijn afbeelding zit.
Weet iemand een oplossing hiervoor? Waarschijnlijk iets simpel? Mijn image moet wel clickable zijn, vandaar het gebruik van de <a></a>.
HTML code:
<a href="#" class="project-item"><img src="images/projecten/AboutMe.png" width="310" height="194" alt="About Me project"></a>
CSS:
.project-item
{
margin-left:20px;
width:313px;
float:left;
}
.project-item img
{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 200ms linear;
}
.project-item img:hover
{
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 200ms linear;
}
hartelijk dank!
