Ik probeer een stapel afbeeldingen te maken met HTML en CSS, zodat als ik de muisaanwijzer erop houd of erop klik, deze op dezelfde pagina wordt vergroot. Dit is wat ik heb kunnen doen:
<img src ="mark1.jpg" height="150" width="300" />
<img src ="mark2.jpg" height="150" width="300" />
<img src ="mark3.jpg" height="150" width="300" />
<img src ="mark4.jpg" height="150" width="300" />
<img src ="watson1.jpg" height="150" width="300" />
<img src ="watson2.jpg" height="150" width="300" />
<img src ="watson3.jpg" height="150" width="300" />
<img src ="watson4.jpg" height="150" width="300" />
<img src ="watson5.jpg" height="150" width="300" />
<img src ="morgan1.jpg" height="150" width="300" />
<img src ="nyong1.jpg" height="150" width="300" />
<img src ="lion1.jpg" height="150" width="300" />
Antwoord 1, autoriteit 100%
Voeg alle afbeeldingen toe aan een container, bijvoorbeeld:
<div class="imageContainer">
<img src ="lion1.jpg" height="150" width="300" />
</div>
Stel vervolgens een CSS in die iets doet met alle <img>-tags in die container wanneer de muisaanwijzer erop staat:
.imageContainer > img:hover {
width: 500px;
height: 200px;
}
Ik heb dit niet geprobeerd, maar ik denk dat het je misschien op het goede spoor zet om zelf te experimenteren.
Antwoord 2, autoriteit 91%
Een mogelijkheid om alleen hover te gebruiken is om transform:scale
te gebruiken
CSS
img {
transition:transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5); /* or some other value */
transform:scale(1.5);
}
Antwoord 3, autoriteit 18%
Controleer deze viool
HTML:
<body>
<div id="rightImage">
<a href="www. abc.com" target="_blank"> <img src="https://www.gravatar.com/avatar/703327d6394d273e741186dbc0109f4f?s=128&d=identicon&r=PG&f=1" alt="image"/></a>
</div>
</body>
CSS:
#rightImage
{
height:275px;
float:left;
position:relative;
}
#rightImage:hover img
{
height: 300px;
}