• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Einen Hyperlink in ein Bild implementieren mit Beibehaltung der Bildformatierung

Chantico0001

Neues Mitglied
Ich möchte einen Hyperlink in ein Bild implementieren und beibehalten, dass das Bild diesen "pop out" Effekt hat wenn man mit der Maus darüber fährt.
Css:
Code:
header{


    padding-top: 30px;
    padding-left: 5%;
    background-color:#110F0F;
}

header img{
    height: 200px;
  
    margin-right:auto;
    margin-left:auto;
    display: block;

}

.aatrox {
    align-content: center;
     border: solid #47dfff ;

    background-color:#110F0F;
     transition: transform .2s;
     width: 200px;
     height: 200px;
     margin: 0 auto;
}

.aatrox:hover {
    transform: scale(1.5);
}
.body{
    background-image: url("Bilder/Abackground.PNG") ;





}
#bilder{

    padding-left: 5%;




}

Now the html Code:


Code:
<html lang="en">

<head>
    <link rel = "stylesheet"
          type = "text/css"
          href = "CSS.css" />


</head>

<body background="Bilder/Abackground.PNG">

<header>
<div>
    <img src="WebsiteLogo.png">


</div>



</header>
<section id="navigate">




</section>
<div id="bilder">

  <a class="aatrox" href="http://www.youtube.com"><img src="Bilder/aatrox.PNG" title="aatrox" height="200px" /></a>
    <img class="aatrox" src="Bilder/ahri.PNG" height="200px">

   


</div>





</section>





</body>

</html>
Das ist der bisherige Code was muss ich tun um gewünschtes zu erreichen?
 
Zuletzt bearbeitet:
Werbung:
Don't get confused because of the title I have following problem: I want to be able to use an image as a hyperling while the image still keeps the format which is following:

header{


padding-top: 30px;
padding-left: 5%;
background-color:#110F0F;
}

header img{
height: 200px;

margin-right:auto;
margin-left:auto;
display: block;

}

.aatrox {
align-content: center;
border: solid #47dfff ;

background-color:#110F0F;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}

.aatrox:hover {
transform: scale(1.5);
}
.body{
background-image: url("Bilder/Abackground.PNG") ;





}
#bilder{

padding-left: 5%;




}



Now the html Code:



<html lang="en">

<head>
<link rel = "stylesheet"
type = "text/css"
href = "CSS.css" />


</head>

<body background="Bilder/Abackground.PNG">

<header>
<div>
<img src="WebsiteLogo.png">


</div>



</header>
<section id="navigate">




</section>
<div id="bilder">

<a class="aatrox" href="http://www.youtube.com"><img src="Bilder/aatrox.PNG" title="aatrox" height="200px" /></a>
<img class="aatrox" src="Bilder/ahri.PNG" height="200px">




</div>





</section>





</body>

</html>

well thats my code rn how do I have to change it in order to get the result I want (which is having a hyperling and this hover thing you can see up there ^)
Hope someone can help me

Versuchs noch mal auf deutsch, dann kommt vielleicht jemand mit.
Und [CODE][/CODE] nicht vergessen ;)
 
Werbung:
Ich möchte einen Hyperlink in ein Bild implementieren und beibehalten, dass das Bild diesen "pop out" Effekt hat wenn man mit der Maus darüber fährt.
Css:
Code:
header{


    padding-top: 30px;
    padding-left: 5%;
    background-color:#110F0F;
}

header img{
    height: 200px;
 
    margin-right:auto;
    margin-left:auto;
    display: block;

}

.aatrox {
    align-content: center;
     border: solid #47dfff ;

    background-color:#110F0F;
     transition: transform .2s;
     width: 200px;
     height: 200px;
     margin: 0 auto;
}

.aatrox:hover {
    transform: scale(1.5);
}
.body{
    background-image: url("Bilder/Abackground.PNG") ;





}
#bilder{

    padding-left: 5%;




}

Now the html Code:


Code:
<html lang="en">

<head>
    <link rel = "stylesheet"
          type = "text/css"
          href = "CSS.css" />


</head>

<body background="Bilder/Abackground.PNG">

<header>
<div>
    <img src="WebsiteLogo.png">


</div>



</header>
<section id="navigate">




</section>
<div id="bilder">

  <a class="aatrox" href="http://www.youtube.com"><img src="Bilder/aatrox.PNG" title="aatrox" height="200px" /></a>
    <img class="aatrox" src="Bilder/ahri.PNG" height="200px">

  


</div>





</section>





</body>

</html>
Das ist der bisherige Code was muss ich tun um gewünschtes zu erreichen?

Die Klasse "aatrox" auf das <img> statt dem <a> anwenden sollte funktionieren.
 
Zurück
Oben