Comment agrandir une image sur le vol stationnaire ou cliquez sur?

Je suis en train de faire une pile d'images à l'aide de HTML et CSS, que si je survolez ou cliquez sur l'un d'eux, il va être agrandie dans la même page. C'est ce que j'ai pu faire:

<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" />

Vous aurez besoin d'un peu de JavaScript (ou jQuery pour ce comportement.
vous avez juste ajouté les images. Qu'avez-vous fait pour agrandir les images jusqu'à présent?
J'ai édité ma question.
mais je ne vois pas le code javascript efforts
StackOverflow n'est pas un forum. Vous devez vous présenter au moins un minimum d'efforts vous avez essayé jusqu'à présent et de donner quelques informations plus détaillées. Vous pouvez également lire comment poser une bonne question.
Notez que la hauteur et la largeur des images peut être réglée via le CSS suivant: img { height: 150px; width: 300px; }.
Pourquoi les downvotes? Je ne connais pas le Javascript. J'ai édité ma question.

InformationsquelleAutor Emmanuel O. | 2014-07-30

css html

4

Ajouter toutes les images d'un conteneur, par exemple:
```
<div class="imageContainer">
  <img src ="lion1.jpg" height="150" width="300" />
</div>
```
Ensuite de fixer des CSS qui fait quelque chose pour tous les <img> balises dans le conteneur lors de son survol:
```
.imageContainer > img:hover {
  width: 500px;
  height: 200px;
}
```
Je n'ai pas essayé mais je pense qu'il pourrait vous mettre sur la bonne voie pour expérimenter vous-même.
- Permettez-moi de l'essayer. Je vais revenir à vous dès que possible.
- Rapide jsfiddle: jsfiddle.net/PRP95.
- Fonctionne parfaitement.
InformationsquelleAutor confuse
10

Un possibililty à l'aide de planer seulement est d'utiliser transform:scale

JSfiddle Démo

CSS
```
img {
    transition:transform 0.25s ease;
}

img:hover {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}
```
- C'est bien si vous ne voulez pas que les images de pousser à bout. Petit plus!
InformationsquelleAutor Paulie_D

Cochez cette violon

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;  
}

InformationsquelleAutor Shubham Bhave

Vous devez vous connecter pour publier un commentaire.