Einen Hyperlink in ein Bild implementieren mit Beibehaltung der Bildformatierung

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

Chantico0001

Neues Mitglied
12 Juni 2018
3
0
1
18
#1
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:

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#2
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 ;)
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#4
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.
 
Zustimmungen: Chantico0001